/* A AMOSTRA DA COR: a fonte única do disco que mostra uma pintura, na página
   de modelo (o botão `.model-color`) e no configurador público (a amostra
   `.opt-card-swatch` dentro do cartão de opção). Os dois pedem a mesma
   pintura, e desenhá-la em duas folhas era ler a mesma cor de duas maneiras.

   Cada sítio escreve a tinta na sua variável (`--model-color-a`/`-b` na
   página de modelo, `--sw`/`--sw2` no configurador), e daqui sai o disco:
   o aro fino por dentro e, no bicolor, o tejadilho no terço de cima, que é
   como o carro é. As cores vêm de quem a usa, não daqui. */

.model-color,
.opt-card-swatch {
    --swatch-a: var(--model-color-a, var(--sw, #cccccc));
    --swatch-b: var(--model-color-b, var(--sw2, #cccccc));
}

/* Base para o ecrã estreito: o disco do configurador, de 28px, dentro do
   cartão de opção. O alvo de toque é o do cartão inteiro. */
.opt-card-swatch {
    flex: none;
    width: 28px;
    height: 28px;
    margin-top: 0;
    border-radius: 50%;
    background: var(--swatch-a);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
}

.opt-card-swatch.is-dual {
    background: linear-gradient(180deg,
        var(--swatch-b) 0%, var(--swatch-b) 34%,
        var(--swatch-a) 34%, var(--swatch-a) 100%);
}

/* O botão da página de modelo: alvo de toque de 44px com o disco por dentro. */
.model-color {
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
}

/* O disco da tinta. Fica num pseudo-elemento para o anel de seleção poder
   crescer por fora sem mexer no tamanho do alvo de toque. */
.model-color::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: var(--swatch-a);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
}

.model-color--two-tone::before {
    background: linear-gradient(180deg,
        var(--swatch-b) 0%, var(--swatch-b) 34%,
        var(--swatch-a) 34%, var(--swatch-a) 100%);
}

.model-color::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: border-color .2s ease;
}

.model-color[aria-pressed="true"]::after {
    border-color: var(--model-ink, var(--site-ink));
}

/* O foco é um contorno, nunca texto: o vermelho da marca só aqui. */
.model-color:focus-visible {
    outline: 2px solid var(--model-red, var(--site-ink));
    outline-offset: 2px;
}