/* Prix d'un lot (composant Price) et choix TTC / HT (composant PriceToggle), ADR 0018. */

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

.price__main {
    font: var(--weight-bold) var(--text-xl) / 1.15 var(--font-display);
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.price__main--unknown {
    font-size: var(--text-lg);
}

.price__tax,
.price__unit {
    font: var(--type-body-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    letter-spacing: 0;
}

.price__other {
    font: var(--type-body-sm);
    color: var(--text-tertiary);
}

.price-toggle {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    align-items: center;
}

.price-toggle__label {
    font: var(--type-label);
    color: var(--text-secondary);
}

.price-toggle__options {
    display: inline-flex;
    padding: 2px;
    border: var(--border-width) solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
}

.price-toggle__options button {
    min-width: 3.5rem;
    min-height: 36px;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    font: var(--type-label);
    color: var(--text-secondary);
    cursor: pointer;
}

.price-toggle__options button:hover {
    color: var(--text-primary);
}

.price-toggle__options button[aria-pressed="true"] {
    background: var(--surface-inverse);
    color: var(--text-inverse);
}

.price-toggle__options button:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}