/*
 * The launcher tile. The brand is DATA — a palette family the app picked — so it
 * arrives as ONE custom property naming that family's solid, and the gradient's
 * light end is that solid with a fifth of white mixed in: one value to theme,
 * and the two ends can no longer drift onto different families.
 *
 * The two radii are offsets from the control rung, so a theme that moves the
 * control corner moves the tile with it.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-app-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    /* The tile's own square measure — a launcher mark, not a rung on the
       avatar scale. */
    width: 32px;
    height: 32px;
    border-radius: calc(var(--lotics-radius-control) - var(--lotics-space-4));
    /* Solid colour is the base the gradient layers over. */
    background-color: var(--lotics-app-icon, var(--lotics-tone-zinc-solid));
    background-image: linear-gradient(
      135deg,
      color-mix(
          in srgb,
          var(--lotics-white) 18%,
          var(--lotics-app-icon, var(--lotics-tone-zinc-solid))
        )
        0%,
      var(--lotics-app-icon, var(--lotics-tone-zinc-solid)) 100%
    );
    --lotics-icon-color: var(--lotics-ink-default);
  }

  /* A brand ground carries white ink; the neutral default keeps the page's. */
  .lotics-app-icon[data-brand] {
    --lotics-icon-color: var(--lotics-ink-on-inverse);
  }

  .lotics-app-icon[data-size="md"] {
    width: 40px;
    height: 40px;
    border-radius: calc(var(--lotics-radius-control) - var(--lotics-space-2));
    box-shadow: 0 2px 4px color-mix(in srgb, var(--lotics-shadow-color) 10%, transparent);
  }
}