/*
 * The launcher tile. The brand arrives as one property naming a family's solid, and the gradient's
 * light end mixes white into it, so the two ends cannot drift apart. Radii are offsets from the
 * control rung.
 */
@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;
    /* 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));
    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);
  }

  .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);
  }
}