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

@layer a26.components.split-view {
  :root {
    --a26-split-sidebar-width: 280px;
    --a26-split-secondary-width: 360px;
    --a26-split-tertiary-min-width: 420px;
    --a26-split-divider: 1px solid var(--a26-separator);
  }

  .a26-split-view {
    min-height: 620px;
    display: grid;
    grid-template-columns: var(--a26-split-sidebar-width) var(--a26-split-secondary-width) minmax(var(--a26-split-tertiary-min-width), 1fr);
    overflow: hidden;
    background: var(--a26-bg-app);
    color: var(--a26-text-primary);
  }

  .a26-split-view[data-columns="2"] {
    grid-template-columns: var(--a26-split-sidebar-width) minmax(0, 1fr);
  }

  .a26-split-view .a26-sidebar,
  .a26-split-view .a26-pane {
    min-height: 0;
    height: 100%;
  }

  .a26-split-view__divider {
    width: 1px;
    background: var(--a26-separator);
  }

  .a26-split-view [data-selected="true"],
  .a26-split-view [aria-current="page"] {
    background: var(--a26-row-selected-bg);
  }

  .a26-split-back {
    display: none;
  }

  @media (max-width: 1100px) {
    .a26-split-view {
      grid-template-columns: var(--a26-split-sidebar-width) minmax(0, 1fr);
    }

    .a26-split-view > [data-pane-role="tertiary"] {
      display: none;
    }

    .a26-split-view[data-active-pane="tertiary"] > [data-pane-role="secondary"] {
      display: none;
    }

    .a26-split-view[data-active-pane="tertiary"] > [data-pane-role="tertiary"] {
      display: flex;
    }
  }

  @media (max-width: 760px) {
    .a26-split-view {
      min-height: 620px;
      grid-template-columns: 1fr;
    }

    .a26-split-view > .a26-sidebar,
    .a26-split-view > .a26-pane {
      display: none;
      border-inline-start: 0;
    }

    .a26-split-view[data-active-pane="primary"] > [data-pane-role="primary"],
    .a26-split-view[data-active-pane="secondary"] > [data-pane-role="secondary"],
    .a26-split-view[data-active-pane="tertiary"] > [data-pane-role="tertiary"] {
      display: flex;
    }

    .a26-split-back {
      display: inline-flex;
    }
  }
}