@ozen-ui/kit/__inner__/cjs/components/BottomSheetBase/BottomSheetBase.css

React component library

.BottomSheetBase {
  display: flex;
  flex-direction: column;
  position: fixed;
  inline-size: 100%;
  block-size: var(--bottom-sheet-base-height, 0);
  background-color: var(--bottom-sheet-base-background-color);
  inset-block-end: 0;
  touch-action: none;
  transform: translate(0, calc(var(--bottom-sheet-base-y, 0px) * -1));
  z-index: var(--z-index-modal);
  -webkit-user-select: var(--bottom-sheet-base-user-select);
     -moz-user-select: var(--bottom-sheet-base-user-select);
          user-select: var(--bottom-sheet-base-user-select);
}

  .BottomSheetBase-Wrapper {
    --bottom-sheet-base-background-color: var(--color-background-main);
  }

  .BottomSheetBase-Wrapper::before {
      content: "";
      pointer-events: none;
      background-color: var(--bottom-sheet-base-background-color);
      block-size: 100vh;
      transform-origin: bottom;
      transform: translate(0, calc(100vh - var(--bottom-sheet-base-y, 0px) - 1px));
      will-change: transform;
      z-index: 3;
      overscroll-behavior: none;
      touch-action: none;
      position: fixed;
      inset-inline: 0 0;
      inset-block-end: 0;
      -webkit-user-select: none;
         -moz-user-select: none;
              user-select: none;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
    }