/*
  Wortic macOS UI Kit — Navigation Split View
  wm-split — layout de 2 ou 3 colunas (sidebar + content [+ inspector])
  redimensionável e colapsável. Depende de components/sidebar/ e
  components/window/ para o chrome; este arquivo cuida só do layout.
*/

@layer components {
  .wm-split {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
  }

  .wm-split__sidebar {
    flex: none;
    position: relative;
    min-width: 160px;
    max-width: 420px;
  }

  .wm-split__sidebar.is-collapsed {
    width: 0 !important;
    min-width: 0;
    overflow: hidden;
    border: none;
  }

  /* Resizer: alvo de 8px, feedback como barra fina de 2px (não um
     bloco de fill web-like). */
  .wm-split__resizer {
    position: absolute;
    top: 0;
    right: -4px;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    z-index: var(--wm-z-sticky);
  }
  .wm-split__resizer::after {
    content: "";
    position: absolute;
    inset: 0;
    margin-inline: 3px;
    border-radius: var(--wm-radius-pill);
    background: var(--wm-accent);
    opacity: 0;
    transition: opacity var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-split__resizer:hover::after {
    opacity: 0.35;
  }
  .wm-split__resizer.is-active::after {
    opacity: 0.65;
  }

  .wm-split__content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--wm-surface-primary);
  }

  .wm-split__content-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--wm-scrollbar-thumb) transparent;
  }
  .wm-split__content-scroll::-webkit-scrollbar {
    width: 9px;
  }
  .wm-split__content-scroll::-webkit-scrollbar-track {
    background: transparent;
  }
  .wm-split__content-scroll::-webkit-scrollbar-thumb {
    background: var(--wm-scrollbar-thumb);
    border-radius: var(--wm-radius-pill);
    border: 3px solid transparent;
    background-clip: padding-box;
  }
  .wm-split__content-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--wm-scrollbar-thumb-hover);
    border-width: 2px;
    background-clip: padding-box;
  }

  .wm-split__inspector {
    flex: none;
    position: relative;
    width: 280px;
    min-width: 200px;
    max-width: 420px;
    border-inline-start: var(--wm-border-width-hairline) solid
      color-mix(in srgb, var(--wm-separator) 85%, transparent);
    background: var(--wm-surface-sidebar);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--wm-scrollbar-thumb) transparent;
    transition: width var(--wm-duration-normal) var(--wm-ease-emphasized),
      min-width var(--wm-duration-normal) var(--wm-ease-emphasized);
  }
  .wm-split__inspector::-webkit-scrollbar {
    width: 9px;
  }
  .wm-split__inspector::-webkit-scrollbar-track {
    background: transparent;
  }
  .wm-split__inspector::-webkit-scrollbar-thumb {
    background: var(--wm-scrollbar-thumb);
    border-radius: var(--wm-radius-pill);
    border: 3px solid transparent;
    background-clip: padding-box;
  }
  .wm-split__inspector.is-collapsed {
    width: 0 !important;
    min-width: 0;
    overflow: hidden;
    border: none;
  }

  .wm-split__inspector .wm-split__resizer {
    left: -4px;
    right: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    .wm-split__inspector {
      transition: none;
    }
  }

  /* Breakpoint: em telas estreitas, sidebar vira overlay */
  @media (max-width: 720px) {
    .wm-split__inspector {
      display: none;
    }
  }
}