tutu/src/material/BottomSheet.module.css

.bottomSheet {
  composes: surface from "./material.module.css";
  composes: cardGutSkip from "./cards.module.css";
  composes: cardNoPad from "./cards.module.css";
  border: none;
  position: absolute;
  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;

  &::backdrop {
    background-color: black;
    opacity: 0.5;
    transition: opacity 220ms var(--tutu-anim-curve-std);
  }

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

  :global(.MuiToolbar-root) > :global(.MuiButtonBase-root):first-child {
    margin-left: -0.5em;
    margin-right: 24px;
  }

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

  &.animated {
    position: absolute;
    transform: translateY(-50%);
    overflow: hidden;
    will-change: width, height, top, left;

    &::backdrop {
      opacity: 0;
    }

    & * {
      overflow: hidden;
    }

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

  &.bottom {
    top: unset;
    transform: translateX(-50%);
    bottom: 0;

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

      }
    }
  }
}