/*
 * App-specific styles. Layout, spacing, typography, and tints come from Web
 * Awesome native styles, `wa-*` utility classes, design tokens, and inline
 * styles in the components themselves. Only what those can't express lives
 * here: shadow `::part()` styling, attribute/`:hover`/`[data-active]` state
 * selectors, descendant selectors, and responsive `@media` rules.
 */

/* Body font comes from awesome_web/styles/native.css. */

wa-dialog::part(title),
wa-dialog::part(footer) {
  user-select: none;
}

wa-dialog.dialog-settings {
  --width: 45rem;

  &::part(header) {
    border-bottom: 2px solid var(--wa-color-neutral-20);
    padding-bottom: var(--wa-space-xs);
  }
  &::part(body) {
    padding: 0;
  }
  &::part(footer) {
    border-top: 2px solid var(--wa-color-neutral-20);
    padding-block: var(--wa-space-s);
  }

  wa-tab-group::part(body) {
    padding: var(--wa-space-l);
  }
  wa-tab-panel,
  wa-tab-panel::part(base) {
    height: 100%;
  }
}

wa-drawer {
  --size: 100vw;
}
@media (width >= 600px) and (width < 800px) {
  wa-drawer {
    --size: 90vw;
  }
}
@media (width >= 800px) {
  wa-drawer {
    --size: 30rem;
  }
}

wa-details summary {
  display: flex;
  gap: var(--wa-space-m);
  align-items: center;
}

wa-card {
  &::part(media) {
    border-block-end-style: var(--wa-border-style);
    border-block-end-color: var(--wa-color-surface-border);
    border-block-end-width: var(--wa-panel-border-width);
  }
  &::part(header) {
    padding: var(--wa-space-s);
    border-block-end: 0;
  }
  &::part(body) {
    padding: var(--wa-space-s);
    padding-top: var(--wa-space-2xs);
    flex-grow: 1;
  }
  &::part(footer) {
    border-block-start: 0;
    padding: var(--wa-space-s);
  }
}

wa-skeleton::part(indicator) {
  border-radius: var(--wa-form-control-border-radius);
}

/* The preview carousel fades in when a generated preview lands; its inline
 * opacity flips while `visibility` gates interaction instantly. */
wa-carousel {
  transition: opacity var(--wa-transition-normal) ease-out;

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