/*
 * 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. */
html {
  user-select: none;
}

wa-input::part(label) {
  display: none;
}

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

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

wa-dialog.dialog-settings wa-tab-group::part(body) {
  padding: var(--wa-space-l);
}
wa-dialog.dialog-settings wa-tab-panel,
wa-dialog.dialog-settings 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);
}
wa-card::part(header) {
  padding: var(--wa-space-s);
  border-block-end: 0;
}
wa-card::part(body) {
  padding: var(--wa-space-s);
  padding-top: var(--wa-space-2xs);
  flex-grow: 1;
}
wa-card::part(footer) {
  border-block-start: 0;
  padding: var(--wa-space-s);
}

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