@ozen-ui/kit/__inner__/esm/components/DrawerNext/Drawer.css

React component library

.DrawerNext {
  --drawer-inline-padding: var(--spacing-s);
  --drawer-block-padding: var(--spacing-l);
  --drawer-blocks-gap: var(--spacing-m);
  display: flex;
}

  .DrawerNext .Modal-Window {
    position: relative;
    inline-size: 100%;
    max-inline-size: var(--drawer-next-max-width);
    block-size: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border: none;
    inset-block-start: auto;
    inset-inline-start: auto;
    transform: none;
    padding: 0;
    outline: none;
  }

  /* ---- INNER CONTAINER ---- */

  .DrawerNext-InnerContainer {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    max-block-size: 100%;
    overflow: auto;
  }

  /* ---- FULL SCREEN ---- */

  .DrawerNext_fullScreen .Modal-Window {
      border-radius: 0;
    }

  /* ---- DEVICE TYPE ----  */

  /* --- DESKTOP ---  */

  .DrawerNext_deviceType_desktop.DrawerNext_size_s {
    --drawer-inline-padding: var(--spacing-m);
    --drawer-block-padding: var(--spacing-m);
  }

  .DrawerNext_deviceType_desktop.DrawerNext_size_m {
    --drawer-inline-padding: var(--spacing-l);
    --drawer-blocks-gap: var(--spacing-l);
  }

  /* ---- CLOSE BUTTON ----  */

  .DrawerNext-CloseButtonContainer {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-end: 8px;
  }

  .DrawerNext_hasCloseButton {
    --drawer-header-item-padding-right: var(--spacing-m);
  }

  /* ---- PLACEMENT ---- */

  .DrawerNext_placement_right {
    --drawer-start-position: 100%;
    justify-content: flex-end;
  }

  .DrawerNext_placement_right .Modal-Window {
      border-start-end-radius: 0;
      border-end-end-radius: 0;
    }

  .DrawerNext_placement_left {
    --drawer-start-position: -100%;
    justify-content: flex-start;
  }

  .DrawerNext_placement_left .Modal-Window {
      border-start-start-radius: 0;
      border-end-start-radius: 0;
    }

  /* ---- ANIMATION ---- */

  .DrawerNext_animation-appear .Modal-Window, .DrawerNext_animation-enter .Modal-Window {
      transform: translate(var(--drawer-start-position), 0);
    }

  .DrawerNext_animation-appear-active .Modal-Window, .DrawerNext_animation-enter-active .Modal-Window {
      transition: transform var(--transition-slow);
      transform: translate(0, 0);
    }

  .DrawerNext_animation-enter-done .Modal-Window {
      transform: translate(0, 0);
    }

  .DrawerNext_animation-exit .Modal-Window {
      visibility: visible;
      transform: translate(0, 0);
    }

  .DrawerNext_animation-exit-active .Modal-Window {
      visibility: visible;
      transition: transform var(--transition-slow);
      transform: translate(var(--drawer-start-position), 0);
    }

  .DrawerNext_animation-exit-done .Modal-Window {
      visibility: hidden;
      transform: translate(var(--drawer-start-position), 0);
    }