.BottomSheet {
  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: auto 560px auto 95vh;


  &::backdrop {
    background: transparent;

    transition: background-color 120ms var(--tutu-anim-curve-std);
    transition-behavior: allow-discrete;
  }

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

  .MuiToolbar-root {
    >.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: fixed;
    overflow: hidden;
    will-change: width, height, top, left;

    & * {
      overflow: hidden;
    }
  }

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

    &[open]::backdrop {
      background: var(--tutu-color-shadow-l1);
    }

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