/*
A26 Web Design System — Pane Component
Version: v1.0.0-alpha.0005
*/

@layer a26.components.pane {
  :root {
    --a26-pane-min-width: 280px;
    --a26-pane-secondary-width: var(--a26-secondary-pane-width);
    --a26-pane-tertiary-min-width: var(--a26-tertiary-pane-min-width);
    --a26-pane-divider-width: 1px;
    --a26-pane-divider-color: var(--a26-separator);
  }

  .a26-pane {
    min-width: 0;
    min-height: 100%;
    background: var(--a26-pane-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .a26-pane[data-pane-role="primary"] {
    background: var(--a26-sidebar-bg);
    backdrop-filter: var(--a26-sidebar-blur);
    -webkit-backdrop-filter: var(--a26-sidebar-blur);
  }

  .a26-pane[data-pane-role="secondary"],
  .a26-pane[data-pane-role="tertiary"] {
    border-inline-start: var(--a26-pane-divider-width) solid var(--a26-pane-divider-color);
  }

  .a26-pane__content {
    flex: 1;
    min-width: 0;
    overflow: auto;
    padding: var(--a26-space-5);
  }

  .a26-pane__content[data-density="list"] {
    padding: var(--a26-space-4);
  }

  .a26-pane__empty {
    min-height: 220px;
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--a26-text-secondary);
  }
}