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

React component library

/* stylelint-disable */
.Drawer {
  --drawer-header-item-padding-right: 0;
  display: flex;
}
.Drawer .Modal-Window {
    inline-size: 100%;
    max-inline-size: var(--drawer-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;
  }
.Drawer-InnerContainer {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    max-block-size: 100%;
    overflow: auto;
  }
.Drawer-Header,
  .Drawer-Footer {
    background-color: inherit;
  }
.Drawer-Header {
    padding: var(--drawer-space-size) var(--drawer-space-size)
      var(--drawer-padding-bottom);
  }
.Drawer-Title {
    margin: 0;
    padding-inline-end: var(--drawer-header-item-padding-right);
  }
.Drawer-Subtitle {
    color: var(--color-content-secondary);
    margin-block-start: var(--spacing-2xs);
    padding-inline-end: var(--drawer-header-item-padding-right);
  }
.Drawer-Body {
    padding: 0 var(--drawer-space-size);
    flex-grow: 1;
    box-sizing: border-box;
    overflow: auto;
  }
.Drawer-Body:first-child {
    margin-block-start: var(--drawer-body-first-child-margin-top);
  }
.Drawer-Body:last-child {
    margin-block-end: var(--drawer-space-size);
  }
.Drawer-Footer {
    padding: var(--drawer-space-size);
    display: flex;
    justify-content: flex-end;
    margin-block-start: auto;
    gap: var(--spacing-2xs);
  }
.Drawer_variant_medium {
      --drawer-width: 480px;
    }
.Drawer_variant_large {
      --drawer-width: 640px;
    }
.Drawer_variant_little {
      --drawer-width: 320px;
    }
.Drawer_size_s {
      --drawer-space-size: 24px;
      --drawer-padding-bottom: 16px;
      --drawer-body-first-child-margin-top: 40px;
      --drawer-body-last-child-margin-bottom: var(--dialog-space-size);
      --drawer-subtitle-margin-top: 4px;
    }
.Drawer_size_s .Drawer-Title {
        font: var(--typography-heading-xl-font);
        letter-spacing: var(--typography-heading-xl-letter_spacing, 0);
        text-transform: var(--typography-heading-xl-text_transform, none);
      }
.Drawer_size_s .Drawer-Caption {
        font: var(--typography-text-s-font);
        letter-spacing: var(--typography-text-s-letter_spacing, 0);
        text-transform: var(--typography-text-s-text_transform, none);
      }
.Drawer_size_l {
      --drawer-space-size: 32px;
      --drawer-padding-bottom: 24px;
      --drawer-body-first-child-margin-top: 56px;
      --drawer-body-last-child-margin-bottom: var(--dialog-space-size);
      --drawer-subtitle-margin-top: 8px;
    }
.Drawer_size_l .Drawer-Title {
        font: var(--typography-heading-2xl-font);
        letter-spacing: var(--typography-heading-2xl-letter_spacing, 0);
        text-transform: var(--typography-heading-2xl-text_transform, none);
      }
.Drawer_size_l .Drawer-Caption {
        font: var(--typography-text-l-font);
        letter-spacing: var(--typography-text-l-letter_spacing, 0);
        text-transform: var(--typography-text-l-text_transform, none);
      }
.Drawer_placement_right {
      --drawer-start-position: 100%;
      justify-content: flex-end;
    }
.Drawer_placement_right .Modal-Window {
        border-start-end-radius: 0;
        border-end-end-radius: 0;
      }
.Drawer_placement_left {
      --drawer-start-position: -100%;
      justify-content: flex-start;
    }
.Drawer_placement_left .Modal-Window {
        border-start-start-radius: 0;
        border-end-start-radius: 0;
      }
.Drawer_hasCloseButton {
    --drawer-header-item-padding-right: 24px;
  }
.IconButtonNext.Drawer-CloseButton {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 8px;
}
.Drawer_animation-appear .Modal-Window, .Drawer_animation-enter .Modal-Window {
      transform: translate(var(--drawer-start-position), 0);
    }
.Drawer_animation-appear-active .Modal-Window, .Drawer_animation-enter-active .Modal-Window {
      transition: transform var(--transition-slow);
      transform: translate(0, 0);
    }
.Drawer_animation-enter-done .Modal-Window {
      transform: translate(0, 0);
    }
.Drawer_animation-exit .Modal-Window {
      visibility: visible;
      transform: translate(0, 0);
    }
.Drawer_animation-exit-active .Modal-Window {
      visibility: visible;
      transition: transform var(--transition-slow);
      transform: translate(var(--drawer-start-position), 0);
    }
.Drawer_animation-exit-done .Modal-Window {
      visibility: hidden;
      transform: translate(var(--drawer-start-position), 0);
    }