@layer component.state {
  .drawer {
    transition:
      transform 0.25s ease,
      display 0.25s ease allow-discrete,
      overlay 0.25s ease allow-discrete;
    transform: translateX(100%);
  }

  .drawer[open] {
    transform: translateX(0);

    @starting-style {
      transform: translateX(100%);
    }
  }

  .drawer::backdrop {
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition:
      opacity 0.25s ease,
      display 0.25s ease allow-discrete,
      overlay 0.25s ease allow-discrete;
  }

  .drawer[open]::backdrop {
    opacity: 1;
    @starting-style {
      opacity: 0;
    }
  }
}