/*
 * Availability (Tts\Ui\Availability\Availability): a dot and a status, and a
 * quieter line under it. The words carry the state; the dot only repeats it -
 * green available, amber on order from the factory, grey unavailable.
 * Decision 23.
 */

.availability {
    display: grid;
    gap: 2px;
}

.availability p {
    margin: 0;
}

.availability__status {
    display: flex;
    align-items: flex-start;
    gap: var(--shop-space-2);
    color: var(--shop-ink);
    font-size: var(--shop-text-md);
    font-weight: var(--shop-weight-semibold);
    line-height: var(--shop-leading-snug);
}

.availability__status::before {
    content: "";
    flex: none;
    width: 10px;
    height: 10px;
    margin-block-start: calc((1lh - 10px) / 2);
    border-radius: 50%;
    background: var(--shop-text-soft);
}

.availability--available .availability__status {
    color: var(--shop-stock-text);
}

:where(.availability--available) .availability__status::before {
    background: var(--shop-stock-dot);
}

:where(.availability--on-order) .availability__status::before {
    background: var(--shop-brand-orange);
}

.availability__detail {
    padding-inline-start: calc(10px + var(--shop-space-2));
    color: var(--shop-text-soft);
    font-size: var(--shop-text-sm);
    line-height: var(--shop-leading-snug);
    font-variant-numeric: tabular-nums;
}

@media (forced-colors: active) {
    .availability__status::before {
        background: CanvasText;
    }
}