/* ── Indicators ──

   Show a state, never act. */

/* ── Badge ──

   A count. Brand colour: something is on (two filters are set). On a button
   it sits on the top right corner. */
.phx-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    box-sizing: border-box;
    padding: 0 0.375rem;
    border-radius: 999px;
    background: rgb(var(--color-primary-700));
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

.phx-button:has(> .phx-badge) {
    position: relative;
}

.phx-button > .phx-badge {
    position: absolute;
    top: -0.375rem;
    right: -0.375rem;
}

/* ── Tones ──

   A status's colour, shared by the tag and the notice: the tone names the
   palette family; none is neutral. A translucent tint, so it reads on the
   ground and in a card. */
.phx-tag,
.phx-notice {
    --phx-tone-tint: var(--color-surface-500);
    --phx-tone-text: var(--color-surface-700);
    background: rgb(var(--phx-tone-tint) / 0.12);
    color: rgb(var(--phx-tone-text));
}

.phx-tag--success,
.phx-notice--success {
    --phx-tone-tint: var(--color-success-500);
    --phx-tone-text: var(--color-success-700);
}

.phx-tag--warning,
.phx-notice--warning {
    --phx-tone-tint: var(--color-warning-500);
    --phx-tone-text: var(--color-warning-700);
}

.phx-tag--destructive,
.phx-notice--destructive {
    --phx-tone-tint: var(--color-destructive-500);
    --phx-tone-text: var(--color-destructive-700);
}

.phx-tag--info,
.phx-notice--info {
    --phx-tone-tint: var(--color-info-500);
    --phx-tone-text: var(--color-info-700);
}

@media (prefers-color-scheme: dark) {
    .phx-tag,
    .phx-notice {
        --phx-tone-tint: var(--color-surface-400);
        --phx-tone-text: var(--color-surface-300);
        background: rgb(var(--phx-tone-tint) / 0.15);
    }

    .phx-tag--success,
    .phx-notice--success {
        --phx-tone-tint: var(--color-success-400);
        --phx-tone-text: var(--color-success-300);
    }

    .phx-tag--warning,
    .phx-notice--warning {
        --phx-tone-tint: var(--color-warning-400);
        --phx-tone-text: var(--color-warning-300);
    }

    .phx-tag--destructive,
    .phx-notice--destructive {
        --phx-tone-tint: var(--color-destructive-400);
        --phx-tone-text: var(--color-destructive-300);
    }

    .phx-tag--info,
    .phx-notice--info {
        --phx-tone-tint: var(--color-info-400);
        --phx-tone-text: var(--color-info-300);
    }
}

/* ── Tag ──

   A status in a word (Paid, Cancelled). */
.phx-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 700;
    white-space: nowrap;
}

.phx-tag svg {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
}

/* --overlay: laid over other content (a corner of a card), so the tint sits
   on the risen colour and nothing shows through. */
.phx-tag--overlay {
    background: linear-gradient(rgb(var(--phx-tone-tint) / 0.12) 0 0),
                var(--phx-raised-background);
}

@media (prefers-color-scheme: dark) {
    .phx-tag--overlay {
        background: linear-gradient(rgb(var(--phx-tone-tint) / 0.15) 0 0),
                    var(--phx-raised-background);
    }
}

/* ── Notice ──

   A status in a sentence or two (what cancelling now costs, why a form was
   refused): an icon, an optional title, the text. */
.phx-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.phx-notice > svg {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.0625rem;
}

.phx-notice p {
    margin: 0;
}

.phx-notice__title {
    margin: 0 0 0.125rem;
    color: inherit;
    font-size: 0.875rem;
    font-weight: 700;
}