.x-drawer {
  z-index: var(--x-drawer-z-index, var(--z-index-30));
  background-color:
    color-mix(
      in var(--x-drawer-background-color-space, srgb),
      var(--color-dark) calc(var(--background-color-opacity, 0) * var(--x-drawer-background-color-opacity)),
      var(--x-drawer-background-color-mix, transparent)
    );
  position: fixed;
  inset: 0;
  display: flex;
  overflow: auto hidden;
  scrollbar-width: none;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  &:not([open]),
  &::backdrop {
    display: none;
  }

  &::-webkit-scrollbar {
    display: none;
  }

  &::after {
    content: "";
    min-inline-size: 100vw;
    scroll-snap-align: end;
  }

  &.flex-col {
    overflow: hidden auto;

    &::after {
      min-block-size: 100dvh;
    }
  }
}