/* =============================================================================
   TAMANHO ESGOTADO (inc/tamanho-esgotado.php): cinza, sem poder ser escolhido,
   e o aviso "Esgotado" ao passar o mouse (computador) ou ao tocar (celular).
   Seletor com 3 classes para passar do hover e do .single-product-layout do
   style.css, que carrega antes.
   ============================================================================= */

.product-form__size-btns .size-btn.is-esgotado {
    position: relative;
    cursor: not-allowed;
}

.product-form__size-btns .size-btn.is-esgotado .size-btn__label,
.product-form__size-btns .size-btn.is-esgotado:hover .size-btn__label {
    background-color: #f2f2f2;
    border-color: #e2e2e2;
    color: #b3b3b3;
    cursor: not-allowed;
    transition: none;   /* sem a animação de cor do .size-btn__label: o cinza entra na hora */
}

/* Mesmo balão do nome da cor nas bolinhas (style.css, .color-swatch::after),
   só que em cima do botão, para não cobrir a linha de baixo. */
.product-form__size-btns .size-btn.is-esgotado::after {
    content: "Esgotado";
    position: absolute;
    bottom: calc( 100% + 8px );
    left: 50%;
    transform: translateX( -50% );
    background: var(--color-primary, #183029);
    color: var(--color-text-on-dark, #ffffff);
    font-size: var(--font-size-xs, 12px);
    line-height: 1;
    letter-spacing: .3px;
    padding: 6px 9px;
    border-radius: var(--border-radius-md, 4px);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast, .15s);
    z-index: 5;
}

@media ( hover: hover ) {
    .product-form__size-btns .size-btn.is-esgotado:hover::after {
        opacity: 1;
    }
}

/* Celular: o JS liga esta classe por um instante quando a pessoa toca. */
.product-form__size-btns .size-btn.is-esgotado.mostra-aviso::after {
    opacity: 1;
}