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

React component library

.Sidebar {
  --sidebar-padding-inline: var(--spacing-xs);
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-block: var(--spacing-xs);
  transition: var(--transition-default);
  transition-property: inline-size;
  background-color: var(--sidebar-background-color);
  inline-size: var(--sidebar-width);
}

  .Sidebar_color_main {
    --sidebar-background-color: var(--color-background-main);
    --sidebar-content-primary-color: var(--color-content-primary);
    --sidebar-content-secondary-color: var(--color-content-accent-secondary);
  }

  .Sidebar_color_accent {
    --sidebar-background-color: var(--color-accent-main);
    --sidebar-content-primary-color: var(--color-content-accent-primary);
    --sidebar-content-secondary-color: var(--color-content-accent-secondary);
  }

  .Sidebar_rounded {
    border-radius: var(--border-radius-l);
  }

  .Sidebar-SizerWrapper {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: calc(var(--sidebar-padding-inline) * -1);
    inline-size: calc(var(--sidebar-padding-inline) * 2);
    block-size: 100%;
    z-index: 1;
  }

  .Sidebar-SizerWrapper_forceShow .Sidebar-Sizer,
  .Sidebar-SizerWrapper:hover .Sidebar-Sizer,
  .Sidebar-SizerWrapper:focus-within .Sidebar-Sizer {
    opacity: 1;
    pointer-events: auto;
    transform: translate(0, -50%) scale(1);
  }

  .Sidebar-Sizer {
    position: absolute;
    transform: translate(0, -50%) scale(0.7);
    inset-block-start: 50%;
    inset-inline-end: 0;
    opacity: 0;
    pointer-events: none;
    transition: var(--transition-default);
    transition-property: transform, opacity;
  }