/* Icon tile: the small rounded square that carries an app or item icon (C1 "Symbolkachel").
   .ui-icon-tile [--sm | --lg | --xl] [--violet | --purple | --indigo | --blue | --sky | --cyan | --teal |
   --green | --leaf | --amber | --orange | --red | --rose | --pink | --fuchsia | --slate | --danger | --success |
   --warning | --info] [--solid]. Default tint = accent.
   Soft tint (default): used by list rows, app headers, dialog headers and empty states.
   --solid: the launcher look (quick access) - neutral tile, symbol in the app colour (the mono themes too).
   With <html data-app-tiles="colourful"> (Apps settings, shell/apps-display.js) it is the app colour as a
   gradient with a white symbol instead; with data-app-tiles="inverted" a tile without app colours, inverted
   against the theme (dark tile, white symbol on light themes; light tile, dark symbol on dark themes). */

@layer reset, tokens, base, layout, components, apps, utilities;

@layer components {
  .ui-icon-tile {
    --_size: 32px;
    --_bg: var(--color-accent-soft);
    --_fg: var(--color-accent-text);

    display: inline-grid;
    place-items: center;
    flex: none;
    width: var(--_size);
    height: var(--_size);
    border-radius: var(--radius-md);
    background: var(--_bg);
    color: var(--_fg);
    font-size: var(--font-size-base);
    line-height: 1;
  }

  .ui-icon-tile > svg {
    width: calc(var(--_size) * 0.52);
    height: calc(var(--_size) * 0.52);
  }

  .ui-icon-tile--sm { --_size: 28px; border-radius: var(--radius-sm); }
  .ui-icon-tile--lg { --_size: 40px; border-radius: var(--radius-lg); }
  .ui-icon-tile--xl { --_size: 56px; border-radius: var(--radius-2xl); }

  .ui-icon-tile--violet { --_bg: var(--color-tint-violet-bg); --_fg: var(--color-tint-violet-fg); }
  .ui-icon-tile--blue { --_bg: var(--color-tint-blue-bg); --_fg: var(--color-tint-blue-fg); }
  .ui-icon-tile--sky { --_bg: var(--color-tint-sky-bg); --_fg: var(--color-tint-sky-fg); }
  .ui-icon-tile--teal { --_bg: var(--color-tint-teal-bg); --_fg: var(--color-tint-teal-fg); }
  .ui-icon-tile--green { --_bg: var(--color-tint-green-bg); --_fg: var(--color-tint-green-fg); }
  .ui-icon-tile--amber { --_bg: var(--color-tint-amber-bg); --_fg: var(--color-tint-amber-fg); }
  .ui-icon-tile--orange { --_bg: var(--color-tint-orange-bg); --_fg: var(--color-tint-orange-fg); }
  .ui-icon-tile--rose { --_bg: var(--color-tint-rose-bg); --_fg: var(--color-tint-rose-fg); }
  .ui-icon-tile--slate { --_bg: var(--color-tint-slate-bg); --_fg: var(--color-tint-slate-fg); }
  .ui-icon-tile--danger { --_bg: var(--color-danger-soft); --_fg: var(--color-danger-text); }
  .ui-icon-tile--success { --_bg: var(--color-success-soft); --_fg: var(--color-success-text); }
  .ui-icon-tile--warning { --_bg: var(--color-warning-soft); --_fg: var(--color-warning-text); }
  .ui-icon-tile--info { --_bg: var(--color-info-soft); --_fg: var(--color-info-text); }

  /* Solid colours of the categorical tints (used by --solid). */
  .ui-icon-tile--violet { --_solid: var(--app-violet); --_solid-deep: var(--app-violet-deep); }
  .ui-icon-tile--blue { --_solid: var(--app-blue); --_solid-deep: var(--app-blue-deep); }
  .ui-icon-tile--sky { --_solid: var(--app-sky); --_solid-deep: var(--app-sky-deep); }
  .ui-icon-tile--teal { --_solid: var(--app-teal); --_solid-deep: var(--app-teal-deep); }
  .ui-icon-tile--green { --_solid: var(--app-green); --_solid-deep: var(--app-green-deep); }
  .ui-icon-tile--amber { --_solid: var(--app-amber); --_solid-deep: var(--app-amber-deep); }
  .ui-icon-tile--orange { --_solid: var(--app-orange); --_solid-deep: var(--app-orange-deep); }
  .ui-icon-tile--rose { --_solid: var(--app-rose); --_solid-deep: var(--app-rose-deep); }
  .ui-icon-tile--slate { --_solid: var(--app-slate); --_solid-deep: var(--app-slate-deep); }

  /* Hues without a token tint: the soft look is mixed from the solid colour. */
  .ui-icon-tile--purple { --_solid: var(--app-purple); --_solid-deep: var(--app-purple-deep); }
  .ui-icon-tile--indigo { --_solid: var(--app-indigo); --_solid-deep: var(--app-indigo-deep); }
  .ui-icon-tile--cyan { --_solid: var(--app-cyan); --_solid-deep: var(--app-cyan-deep); }
  .ui-icon-tile--red { --_solid: var(--app-red); --_solid-deep: var(--app-red-deep); }
  .ui-icon-tile--pink { --_solid: var(--app-pink); --_solid-deep: var(--app-pink-deep); }
  .ui-icon-tile--fuchsia { --_solid: var(--app-fuchsia); --_solid-deep: var(--app-fuchsia-deep); }
  .ui-icon-tile--leaf { --_solid: var(--app-leaf); --_solid-deep: var(--app-leaf-deep); }

  .ui-icon-tile:is(.ui-icon-tile--purple, .ui-icon-tile--indigo, .ui-icon-tile--cyan, .ui-icon-tile--red,
                   .ui-icon-tile--pink, .ui-icon-tile--fuchsia, .ui-icon-tile--leaf) {
    --_bg: color-mix(in srgb, var(--_solid) 16%, transparent);
    --_fg: color-mix(in srgb, var(--_solid) 70%, var(--color-text));
  }

  /* Launcher look (quick access): every tile the same neutral surface, only the symbol carries the app colour
     (deeper shade on light themes for contrast). */
  .ui-icon-tile--solid {
    background: var(--color-bg-surface-2);
    /* Dark themes: the app colour lifted towards the (light) text colour so dark hues stay readable. */
    color: color-mix(in srgb, var(--_solid, var(--color-accent)) 72%, var(--color-text));
    box-shadow: inset 0 0 0 var(--border-width) var(--color-border);
  }

  .ui-icon-tile--solid > svg {
    stroke-width: 2;
  }

  :where(html.theme-light) .ui-icon-tile--solid,
  html:is([data-theme="light"], [data-theme="mono-light"]) .ui-icon-tile--solid {
    color: var(--_solid-deep, var(--color-accent-hover));
  }

  /* Colourful launcher tiles (Apps settings "Farbig"): the app colour as a gradient, white symbol. */
  html[data-app-tiles="colourful"] .ui-icon-tile--solid {
    background: linear-gradient(150deg, var(--_solid, var(--color-accent)), var(--_solid-deep, var(--color-accent-hover)));
    color: var(--_solid-fg, var(--color-on-accent));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-on-accent) 22%, transparent), var(--shadow-sm);
  }

  /* Light themes: the colourful tile glows faintly in its own colour (dark themes keep the plain shadow). */
  html[data-app-tiles="colourful"]:is([data-theme="light"], [data-theme="mono-light"]) .ui-icon-tile--solid {
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-on-accent) 28%, transparent),
      0 4px 10px color-mix(in srgb, var(--_solid, var(--color-accent)) 28%, transparent);
  }

  /* Inverted launcher tiles (Apps settings "Invertiert"): monochrome, the tile in the opposite of the theme. */
  html[data-app-tiles="inverted"] .ui-icon-tile--solid {
    background: linear-gradient(150deg, var(--gray-50), var(--gray-200));
    color: var(--gray-900);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gray-0) 60%, transparent), var(--shadow-sm);
  }

  html[data-app-tiles="inverted"]:is([data-theme="light"], [data-theme="mono-light"]) .ui-icon-tile--solid {
    background: linear-gradient(150deg, var(--gray-750), var(--gray-950));
    color: var(--gray-0);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gray-0) 14%, transparent), var(--shadow-sm);
  }

  /* Mono dark: its accent is light and --color-on-accent dark, the symbol on the app colour stays white. */
  html[data-app-tiles="colourful"][data-theme="mono-dark"] .ui-icon-tile--solid {
    --_solid-fg: var(--gray-0);
  }

  :where(html.theme-mono) .ui-icon-tile:is(.ui-icon-tile--purple, .ui-icon-tile--indigo, .ui-icon-tile--cyan, .ui-icon-tile--red, .ui-icon-tile--pink, .ui-icon-tile--fuchsia, .ui-icon-tile--leaf),
  html[data-theme="mono-light"] .ui-icon-tile:is(.ui-icon-tile--purple, .ui-icon-tile--indigo, .ui-icon-tile--cyan, .ui-icon-tile--red, .ui-icon-tile--pink, .ui-icon-tile--fuchsia, .ui-icon-tile--leaf),
  html[data-theme="mono-dark"] .ui-icon-tile:is(.ui-icon-tile--purple, .ui-icon-tile--indigo, .ui-icon-tile--cyan, .ui-icon-tile--red, .ui-icon-tile--pink, .ui-icon-tile--fuchsia, .ui-icon-tile--leaf) {
    --_bg: var(--color-tint-slate-bg);
    --_fg: var(--color-tint-slate-fg);
  }
}