@use '../../style/theming';

// MARK: Variables

// MARK: Mixin
@mixin core() {
  /// @dbx-utility mat-card-dbx-color
  /// @intent re-emits the dbx-color background paint at higher specificity than MDC's `.mat-mdc-card` `background-color` rule, so a host-level `[dbxColor]` on `<mat-card>` shows through every appearance variant (elevated / outlined / filled). Tonal opacity is honoured via the existing `--dbx-color-bg-tone` channel; in tonal mode the text color flips to the vibrant theme color so contrast survives the light wash. A zero-specificity `:where(:not(.dbx-card-color-accent))` guard exempts the `.dbx-card-color-accent` card so its body stays unpainted while only its left edge takes the bound color.
  /// @role color
  /// @see-also color, color-bg, color-tonal, card-color-accent
  mat-card.dbx-color:where(:not(.dbx-card-color-accent)) {
    background: color-mix(in srgb, var(#{theming.$dbx-bg-color-var}) var(#{theming.$dbx-bg-tone-var}, 100%), transparent);
    color: var(#{theming.$dbx-color-var});

    // outlined buttons inside the painted card follow the card's contrast color — the M3 default
    // primary label/outline may be illegible on the painted surface (e.g. an inverse-surface card).
    --mat-button-outlined-label-text-color: var(#{theming.$dbx-color-var});
    --mat-button-outlined-outline-color: color-mix(in srgb, var(#{theming.$dbx-color-var}) 30%, transparent);

    &.dbx-color-tonal {
      color: var(#{theming.$dbx-bg-color-var});
      --mat-button-outlined-label-text-color: var(#{theming.$dbx-bg-color-var});
      --mat-button-outlined-outline-color: color-mix(in srgb, var(#{theming.$dbx-bg-color-var}) 30%, transparent);
    }
  }

  /// @dbx-utility mat-card-content-flex-column
  /// @intent re-emits the `.dbx-flex-column` display at higher specificity than MDC's `.mat-mdc-card-content` `display: block` rule, so the flex utilities work on `<mat-card-content>` — pair with `.dbx-flex-fill` on the content (fills the card's stretched height) and on a child (absorbs the remaining height).
  /// @role flex
  /// @see-also flex-column, flex-fill, mat-card-dbx-color
  mat-card-content.dbx-flex-column {
    display: flex;
    flex-direction: column;
  }

  /// @dbx-utility card-accent
  /// @intent accent-edged `<mat-card>` — paints a solid border down the card's left edge to flag or categorize the card. Defaults to the M3 primary color; override `--dbx-card-accent-color` for a different hue or `--dbx-card-accent-border-width` for thickness.
  /// @role layout
  /// @see-also card-banner, card-select, color
  // The extra `mat-card.`-qualified selector out-specifies MDC's later-emitted
  // `.mdc-card--outlined` border shorthand, which would otherwise reset the
  // accent edge back to the 1px outline on outlined cards.
  .dbx-card-accent,
  mat-card.dbx-card-accent {
    border-left: var(--dbx-card-accent-border-width, 4px) solid var(--dbx-card-accent-color, var(--mat-sys-primary));
  }

  /// @dbx-utility card-color-accent
  /// @intent accent-edged status `<mat-card>` driven by `[dbxColor]` — the left edge paints from the bound color's `--dbx-bg-color-current` token while the card body keeps its normal unpainted surface (the `mat-card.dbx-color` surface paint exempts this class via its `:where()` guard). Always pair with `[dbxColor]` (e.g. `dbxColor="success"`); override `--dbx-card-accent-border-width` for thickness. Caveat: the theme root declares a default `--dbx-bg-color-current`, so without a bound `[dbxColor]` the edge shows that inherited default, not the `--mat-sys-primary` fallback.
  /// @role layout
  /// @see-also card-accent, color, mat-card-dbx-color
  // `mat-card.`-qualified for the same `.mdc-card--outlined` border-shorthand
  // reason as `.dbx-card-accent` above.
  .dbx-card-color-accent,
  mat-card.dbx-card-color-accent {
    border-left: var(--dbx-card-accent-border-width, 4px) solid var(--dbx-bg-color-current, var(--dbx-card-accent-color, var(--mat-sys-primary)));
  }

  /// @dbx-utility card-banner
  /// @intent banner-style `<mat-card>` — pair with `[dbxColor]` (+ `[dbxColorTone]`) for the tonal surface. Drop `<mat-card-header>` entirely; put the icon + `<mat-card-title>` row inside `<mat-card-content>` via a `.dbx-card-banner-header` child, and the action buttons inside `<mat-card-footer>`.
  /// @role layout
  /// @see-also color, color-tonal, button-wrap-group
  .dbx-card-banner {
    > mat-card-content > .dbx-card-banner-header {
      display: flex;
      align-items: center;
      gap: var(--dbx-padding-3);

      > dbx-icon-tile {
        flex-shrink: 0;
      }
    }

    > mat-card-footer {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--dbx-padding-2);
      padding: var(--dbx-padding-2) var(--dbx-padding-3) var(--dbx-padding-3);
    }
  }

  /// @dbx-utility card-select
  /// @intent selectable "choice" `<mat-card appearance="outlined">` whose content is centered in a column (large `<mat-icon>`, title, subtitle). Pair with `[dbxColor]` + `[dbxColorTone]` and toggle the `.dbx-card-selected` modifier to paint the selected border to match the tonal wash. Put the large glyph in a `.dbx-card-select-icon` `<mat-icon>` and an optional round selected checkmark in a `.dbx-card-select-check` `<dbx-icon-tile [round]>` (absolutely positioned top-right). Fills its parent's height (`height: 100%`) so a row of cards laid out with `dbxFlexGroup` + `[dbxFlexSize]` stays equal-height as it shrinks and wraps.
  /// @role layout
  /// @see-also color, color-tonal, icon-tile, card-banner, flex-group, flex-size
  .dbx-card-select {
    position: relative;
    cursor: pointer;
    text-align: center;
    height: 100%;

    > mat-card-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--dbx-padding-2);
    }

    .dbx-card-select-icon {
      width: var(--dbx-card-select-icon-size, 40px);
      height: var(--dbx-card-select-icon-size, 40px);
      font-size: var(--dbx-card-select-icon-size, 40px);
      margin-bottom: var(--dbx-padding-2);
    }

    .dbx-card-select-check {
      position: absolute;
      top: var(--dbx-padding-3);
      right: var(--dbx-padding-3);
    }

    // Unselected baseline — `[dbxColor]` always applies the `.dbx-color` class
    // (even when bound to a nullish color), and its default-color paint would
    // render the card body in the surface color (invisible). Restore a neutral
    // outlined-card look so the unselected option stays legible. The `:not()`
    // out-specifies the `mat-card.dbx-color` rule and excludes the selected
    // (tonal) card, which keeps its themed paint.
    &:not(.dbx-card-selected) {
      background: var(--mat-sys-surface);
      color: var(--mat-sys-on-surface);
    }

    // Selected state — repaint the outlined-card border to match the tonal
    // `[dbxColor]` wash applied by DbxColorDirective (`--dbx-bg-color-current`).
    &.dbx-card-selected {
      --mat-outlined-card-outline-color: var(--dbx-bg-color-current);
      --mat-outlined-card-outline-width: 2px;
    }
  }

  /// @dbx-utility card-horizontal
  /// @intent horizontally scrolling row of fixed-width, equal-height `.dbx-card-horizontal-item` cards — `align-items: stretch` keeps the cards equal-height while `overflow-x: auto` scrolls the row on narrow viewports. Because `overflow-x: auto` forces vertical overflow to clip, the row reserves headroom via `padding-top` so a `.dbx-card-horizontal-tab` chip poking above a card stays inside the scrollable padding box instead of being clipped; override `--dbx-card-horizontal-tab-overlap` to change the headroom together with the tab.
  /// @role layout
  /// @see-also card-horizontal-item, flex-bar, chip
  .dbx-card-horizontal {
    display: flex;
    align-items: stretch;
    gap: var(--dbx-padding-3);
    overflow-x: auto;
    // overflow-x:auto computes overflow-y to auto — anything above the row's
    // padding box is scroll-clipped and unreachable, so a poking tab must live
    // INSIDE the padding box: reserve its overlap height as top padding.
    padding-top: calc(var(--dbx-card-horizontal-tab-overlap, 10px) + var(--dbx-padding-1));
    padding-bottom: var(--dbx-padding-2);
  }

  /// @dbx-utility card-horizontal-item
  /// @intent fixed-width card for a `.dbx-card-horizontal` row — apply to `<mat-card appearance="outlined">`. Children: an optional `.dbx-card-horizontal-tab` `<dbx-chip>` (absolutely positioned poking above the top edge), an optional full-bleed `.dbx-card-horizontal-header` status bar (plain `<div>` placed BEFORE `<mat-card-content>` — mat-card children stack in a padding-less flex column, so the bar is edge-to-edge for free), the `<mat-card-content>` body, and a `<mat-card-footer>` CTA pushed to the card bottom via `margin-top: auto` so stretch-aligned cards keep their buttons on one line. Toggle `.dbx-card-horizontal-item-highlight` to repaint the outlined-card border in the primary color. Override `--dbx-card-horizontal-item-width` for a different card width.
  /// @role layout
  /// @see-also card-horizontal, card-horizontal-header, card-select, chip, color
  .dbx-card-horizontal-item {
    position: relative;
    flex: 0 0 var(--dbx-card-horizontal-item-width, 300px);
    width: var(--dbx-card-horizontal-item-width, 300px);

    // the header div is the first child, so MDC's
    // `mat-card-content:first-child { padding-top: 16px }` no longer fires —
    // restore the body's top inset.
    > mat-card-content {
      padding-top: var(--dbx-padding-3);
    }

    // mat-card is already a flex column — anchor the CTA to the card bottom.
    > mat-card-footer {
      margin-top: auto;
      padding: var(--dbx-padding-2) var(--dbx-padding-3) var(--dbx-padding-3);

      > button,
      > a {
        width: 100%;
      }
    }

    // highlight (e.g. "today") — repaint the outlined-card border (same
    // pattern as `.dbx-card-select.dbx-card-selected`).
    &.dbx-card-horizontal-item-highlight {
      --mat-outlined-card-outline-color: var(--mat-sys-primary);
      --mat-outlined-card-outline-width: 2px;
    }
  }

  /// @dbx-utility card-horizontal-header
  /// @intent full-bleed status bar across the top of a `.dbx-card-horizontal-item` — a plain `<div>` direct child of `<mat-card>` before `<mat-card-content>`. Pair with `[dbxColor]` for a solid bar or `[dbxColor]` + `[dbxColorTone]` for a tonal wash (tonal mode flips the label to the vibrant theme color). Compose the label from `.dbx-text-label-medium .dbx-uppercase .dbx-tracked-wide`; lead with a `<mat-icon>` or a `.dbx-card-horizontal-header-dot`.
  /// @role layout
  /// @see-also card-horizontal-item, card-horizontal-header-dot, color, color-tonal
  .dbx-card-horizontal-header {
    display: flex;
    align-items: center;
    gap: var(--dbx-padding-2);
    padding: var(--dbx-padding-2) var(--dbx-padding-3);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
  }

  // `[dbxColor]` provides the tokens + the `.dbx-color` marker; the header paints
  // itself from them (mirrors `mat-card.dbx-color`). The `:not(.dbx-default)` guard
  // keeps an uncolored header from painting (the marker is always applied). Tonal
  // mode flips the label to the vibrant color.
  .dbx-card-horizontal-header.dbx-color:not(.dbx-default) {
    background: color-mix(in srgb, var(#{theming.$dbx-bg-color-var}) var(#{theming.$dbx-bg-tone-var}, 100%), transparent);
    color: var(#{theming.$dbx-color-var});

    &.dbx-color-tonal {
      color: var(#{theming.$dbx-bg-color-var});
    }
  }

  /// @dbx-utility card-horizontal-header-dot
  /// @intent small status dot inside a `.dbx-card-horizontal-header` — painted from `currentColor` so it follows the header's (tonal) text color with no extra color wiring.
  /// @role layout
  /// @see-also card-horizontal-header
  .dbx-card-horizontal-header-dot {
    flex-shrink: 0;
    width: var(--dbx-card-horizontal-header-dot-size, 8px);
    height: var(--dbx-card-horizontal-header-dot-size, 8px);
    border-radius: 50%;
    background: currentColor;
  }

  /// @dbx-utility card-horizontal-tab
  /// @intent "TODAY"-style tab — apply to a `<dbx-chip [tone]="100" [small]="true">` inside a `.dbx-card-horizontal-item`; absolutely positioned so it pokes above the card's top edge by `--dbx-card-horizontal-tab-overlap` (which the `.dbx-card-horizontal` row also reserves as top padding so the scroll container does not clip it).
  /// @role layout
  /// @see-also card-horizontal, card-horizontal-item, chip
  // Scoped under the item (0,2,0 specificity) so `position: absolute` beats
  // `.dbx-chip`'s later-emitted `position: relative` (text.core() runs after
  // card.core() in all-layout-core).
  .dbx-card-horizontal-item .dbx-card-horizontal-tab {
    position: absolute;
    top: calc(-1 * var(--dbx-card-horizontal-tab-overlap, 10px));
    left: var(--dbx-padding-3);
    z-index: 1;
  }

  /// @dbx-utility card-horizontal-detail
  /// @intent compact icon + text detail row (location / dates / time) inside a `.dbx-card-horizontal-item` body — muted `on-surface-variant` text with a small leading `<mat-icon>`; also fits a label/value row when composed with `.dbx-spacer`.
  /// @role layout
  /// @see-also card-horizontal-item, spacer, hint
  .dbx-card-horizontal-detail {
    display: flex;
    align-items: center;
    gap: var(--dbx-padding-2);
    padding: var(--dbx-padding-1) 0;
    color: var(--mat-sys-on-surface-variant);

    > mat-icon {
      flex-shrink: 0;
      width: var(--dbx-card-horizontal-detail-icon-size, 18px);
      height: var(--dbx-card-horizontal-detail-icon-size, 18px);
      font-size: var(--dbx-card-horizontal-detail-icon-size, 18px);
    }
  }

  /// @dbx-utility card-horizontal-divider
  /// @intent hairline divider between `.dbx-card-horizontal-item` body sections — the standard `--mat-sys-outline-variant` border-bottom pattern with vertical rhythm baked in.
  /// @role layout
  /// @see-also card-horizontal-item
  .dbx-card-horizontal-divider {
    border-bottom: 1px solid var(--mat-sys-outline-variant);
    margin: var(--dbx-padding-2) 0;
  }

  /// @dbx-utility card-horizontal-mini
  /// @intent small outlined "mini card" row inside a `.dbx-card-horizontal-item` body (e.g. a recommended job: name + detail left, price right) — outline-variant border, corner-small radius, space-between flex row.
  /// @role layout
  /// @see-also card-horizontal-item, color-text
  .dbx-card-horizontal-mini {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dbx-padding-2);
    padding: var(--dbx-padding-2) var(--dbx-padding-3);
    border: 1px solid var(--mat-sys-outline-variant);
    border-radius: var(--mat-sys-corner-small, 8px);

    & + & {
      margin-top: var(--dbx-padding-2);
    }
  }

  /// @dbx-utility card-image-captioned
  /// @intent `mat-card-image` wrapper that overlays a `.dbx-card-image-caption` strip on the bottom of its `<img>` (e.g. a place name over a map popup hero) — put `mat-card-image` on this wrapper `<div>` instead of the `<img>`, so the wrapper keeps mat-card's rounded top corners and clips the image to them.
  /// @role layout
  /// @see-also card-image-caption, text-title-small
  .dbx-card-image-captioned {
    position: relative;
    overflow: hidden;

    > img {
      display: block;
      width: 100%;
      height: auto;
    }
  }

  /// @dbx-utility card-image-caption
  /// @intent single-line caption strip across the bottom of a `.dbx-card-image-captioned` image — light text on a translucent `--mat-sys-scrim` wash that stays readable over any picture in light and dark themes; long text ellipsizes. Pair with a type role utility such as `.dbx-text-title-small`.
  /// @role layout
  /// @parent card-image-captioned
  /// @see-also card-image-captioned, text-title-small
  .dbx-card-image-captioned > .dbx-card-image-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--dbx-padding-2) var(--dbx-padding-4);
    // light text on a dark scrim over imagery, the same in light and dark themes
    color: white;
    background: color-mix(in srgb, var(--mat-sys-scrim, black) 55%, transparent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@mixin theme($theme-config) {
}