import { css } from 'lit';
export default css`@layer wa-utilities {
  :is([class*=wa-cluster], [class*=wa-flank], [class*=wa-frame], [class*=wa-grid], [class*=wa-stack], [class*=wa-split]) > * {
    margin-block: 0;
    margin-inline: 0;
  }
  :where([class*=wa-cluster], [class*=wa-flank], [class*=wa-frame], [class*=wa-grid], [class*=wa-stack], [class*=wa-split]) {
    gap: var(--wa-space-m);
  }
  [class*=wa-cluster] {
    display: flex;
  }
  :where([class*=wa-cluster]) {
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  [class*=wa-flank] {
    display: flex;
    --content-percentage: initial;
    --flank-size: initial;
  }
  [class*=wa-flank]:not([class*=":end"]) > :first-child,
  [class*=wa-flank][class*=":start"] > :first-child {
    flex-basis: var(--flank-size, auto);
    flex-grow: 1;
  }
  [class*=wa-flank]:not([class*=":end"]) > :last-child,
  [class*=wa-flank][class*=":start"] > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: var(--content-percentage, 50%);
  }
  [class*=wa-flank][class*=":end"] > :last-child {
    flex-basis: var(--flank-size, auto);
    flex-grow: 1;
  }
  [class*=wa-flank][class*=":end"] > :first-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: var(--content-percentage, 50%);
  }
  :where([class*=wa-flank]) {
    align-items: center;
    flex-wrap: wrap;
  }
  [class*=wa-frame] {
    display: flex;
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }
  [class*=wa-frame] > img,
  [class*=wa-frame] > video {
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
  }
  [class*=wa-frame][class*=":square"] {
    aspect-ratio: 1 / 1;
  }
  [class*=wa-frame][class*=":landscape"] {
    aspect-ratio: 16 / 9;
  }
  [class*=wa-frame][class*=":portrait"] {
    aspect-ratio: 9 / 16;
  }
  :where([class*=wa-frame]) {
    align-items: center;
    justify-content: center;
  }
  [class*=wa-grid] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--min-column-size, 20ch), 100%), 1fr));
    --min-column-size: initial;
  }
  .wa-span-grid {
    grid-column: 1 / -1;
  }
  [class*=wa-split] {
    display: flex;
  }
  [class*=wa-split],
  [class*=wa-split][class*=":row"] {
    flex-direction: row;
    block-size: auto;
    inline-size: 100%;
  }
  [class*=wa-split]:not([class*=":column"]) > :first-child {
    flex: 0 1 auto;
  }
  [class*=wa-split][class*=":column"] {
    flex-direction: column;
    block-size: auto;
    inline-size: auto;
    align-self: stretch;
  }
  :where([class*=wa-split]) {
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  [class*=wa-stack] {
    display: flex;
    flex-direction: column;
  }
  :where([class*=wa-stack]) {
    align-items: stretch;
    justify-content: flex-start;
  }
}
`;
