@layer component.base {
  .drawer {
    border: none;
    margin: 0 0 0 auto;

    /* overwriting firefox user agent style (was: max-height: calc(100% - 6px - 2em)) */
    max-height: initial;
  }

  @starting-style {
    .drawer[open] {
      transform: translateX(100%);
    }
  }

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