site/src/styles/ak-sidebar.css
/**
 * Copyright 2025-present Ariakit FZ-LLC. All Rights Reserved.
 *
 * This software is proprietary. See the license.md file in the root of this
 * package for licensing terms.
 *
 * SPDX-License-Identifier: UNLICENSED
 */

@custom-variant ak-sidebar-collapsed {
  @container style(--ak-sidebar-collapsed: 1) {
    @slot;
  }
}

@utility ak-sidebar-max-width-* {
  --ak-sidebar-max-width: --spacing(--value(number));
  --ak-sidebar-max-width: --value(--spacing, [*]);
}

@utility ak-sidebar-min-width-* {
  --ak-sidebar-min-width: --spacing(--value(number));
  --ak-sidebar-min-width: --value(--spacing, [*]);
}

@utility ak-sidebar {
  @apply ak-layer-pop-0.5 ak-frame-dialog/2 ak-sidebar-max-width-60 ak-sidebar-min-width-14;
  @apply transition-discrete fixed start-0 top-0 z-10 flex flex-col overflow-clip rounded-none border-e transition-[inline-size,padding,inset] duration-300;
  --ak-sidebar-gap: var(--ak-frame-padding);
  --ak-sidebar-duration: var(--tw-duration);
  interpolate-size: allow-keywords;
  block-size: 100cqb;
  inline-size: var(--ak-sidebar-max-width);
}

@utility ak-sidebar-collapsed {
  @apply ak-frame-dialog/1;
  @apply rounded-none;
  --ak-sidebar-collapsed: 1;
  inline-size: var(--ak-sidebar-min-width);
}

@utility ak-sidebar-section {
  @apply ak-frame-cover;
  @apply gap-(--ak-sidebar-gap) grid;
}

@utility ak-sidebar-header {
  @apply ak-sidebar-section;
}

@utility ak-sidebar-body {
  @apply ak-sidebar-section;
  @apply flex-1 overflow-y-auto overflow-x-clip;
}

@utility ak-sidebar-footer {
  @apply ak-sidebar-section;
}
