.bottomSheet {
  composes: surface from "./material.module.css";
  composes: cardGutSkip from "./cards.module.css";
  composes: cardNoPad from "./cards.module.css";
  border: none;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0;
  width: 100%;
  max-width: 560px;
  border-radius: 2px;
  overscroll-behavior: none;
  max-height: 100vh;
  max-height: 100dvh;
  height: 95%;
  contain: strict;
  contain-intrinsic-size: 100% 95%;

  &::backdrop {
    transition-property: background-color, opacity;
    transition-duration: 120ms;
    transition-timing-function: var(--tutu-anim-curve-std);
    transition-behavior: allow-discrete;
  }

  &[open]::backdrop {
    background-color: black;
    opacity: 0.5;
  }

  box-shadow: var(--tutu-shadow-e16);

  :global(.MuiToolbar-root) {
    > :global(.MuiButtonBase-root) {

      &:first-child {
        margin-left: -0.5em;
        margin-right: 24px;
      }

      &:last-child {
        margin-right: -0.5em;
        margin-left: 24px;
      }

    }
  }

  @media (max-width: 560px) {
    & {
      left: 0;
      top: 0;
      transform: none;
      bottom: 0;
      height: 100vh;
      height: 100dvh;

      contain-intrinsic-size: 100% 100vh;
      contain-intrinsic-size: 100% 100dvh;
    }
  }

  &.animated {
    position: absolute;
    overflow: hidden;
    will-change: width, height, top, left;

    &::backdrop {
      opacity: 0;
      background-color: transparent;
    }

    & * {
      overflow: hidden;
    }
  }

  &.bottom {
    top: unset;
    transform: translateX(-50%);
    bottom: 0;
    content: content;
    height: unset;
    contain: content;
    contain-intrinsic-size: unset;

    @media (max-width: 560px) {
      & {
        transform: none;
        height: unset;
      }
    }
  }
}