@layer odd.reset, odd.tokens, odd.base, odd.layout, odd.components, odd.utilities;

@layer odd.layout {
  .odd-stack {
    display: flex;
    flex-direction: column;
    gap: var(--odd-stack-gap, var(--odd-layout-gap));
    min-inline-size: 0;
  }
  .odd-stack-tight {
    gap: var(--odd-space-xs);
  }
  .odd-stack-loose {
    gap: var(--odd-space-lg);
  }
  .odd-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--odd-row-gap, var(--odd-layout-gap));
    flex-wrap: nowrap;
    min-inline-size: 0;
  }
  .odd-row-between {
    justify-content: space-between;
  }
  .odd-cluster {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--odd-cluster-gap, var(--odd-layout-gap));
    flex-wrap: wrap;
    min-inline-size: 0;
  }
  .odd-grid {
    display: grid;
    grid-template-columns: repeat(var(--odd-grid-columns, 2), minmax(0, 1fr));
    gap: var(--odd-grid-gap, var(--odd-layout-gap));
  }
  .odd-auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--odd-auto-grid-min, var(--odd-layout-item-min)), 100%), 1fr));
    gap: var(--odd-auto-grid-gap, var(--odd-layout-gap));
  }
  .odd-auto-grid-fit {
    grid-template-columns: repeat(auto-fit, minmax(min(var(--odd-auto-grid-min, var(--odd-layout-item-min)), 100%), 1fr));
  }
  .odd-grid-stretch > * {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .odd-box {
    padding: var(--odd-box-inset, var(--odd-layout-inset));
    min-inline-size: 0;
  }
  .odd-box-none {
    padding: var(--odd-space-none);
  }
  .odd-box-roomy {
    padding: var(--odd-space-xl);
  }
  .odd-center {
    display: grid;
    place-items: center;
    min-inline-size: 0;
  }
  .odd-aspect-ratio {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    aspect-ratio: var(--odd-aspect-ratio, 16 / 9);
    min-inline-size: 0;
  }
  .odd-aspect-ratio > * {
    grid-area: 1 / 1;
  }
  .odd-aspect-ratio > :is(img, video, iframe, canvas, svg) {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  .odd-split {
    display: flex;
    flex-wrap: wrap;
    gap: var(--odd-split-gap, var(--odd-layout-gap));
  }
  .odd-split > :first-child {
    flex-basis: var(--odd-split-side-width, var(--odd-layout-sidebar-width));
    flex-grow: 1;
  }
  .odd-split > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: min(var(--odd-split-main-min, var(--odd-layout-main-min)), 100%);
  }
  .odd-split-end > :first-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: min(var(--odd-split-main-min, var(--odd-layout-main-min)), 100%);
  }
  .odd-split-end > :last-child {
    flex-basis: var(--odd-split-side-width, var(--odd-layout-sidebar-width));
    flex-grow: 1;
    min-inline-size: initial;
  }
}