/* KIDS COLOR OPTIONS FIX V16.1.5 */

[data-alternative-id].kids-color-answer-fixed {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 118px !important;

    overflow: hidden;

    color: transparent !important;
    text-shadow: none !important;
}

/*
 * Esconde o círculo antigo que ficou branco.
 * O texto permanece disponível pelo aria-label.
 */
[data-alternative-id].kids-color-answer-fixed
> * {
    visibility: hidden !important;
}

/*
 * Novo círculo colorido.
 */
[data-alternative-id].kids-color-answer-fixed::after {
    content: "";

    display: block;

    width: 76px;
    height: 76px;

    border:
        5px solid
        rgba(255, 255, 255, 0.96);

    border-radius: 50%;

    background:
        var(
            --kids-answer-color,
            #d1d5db
        ) !important;

    box-shadow:
        0 0 0 2px
        rgba(64, 57, 90, 0.18),
        0 10px 20px
        rgba(55, 48, 85, 0.17),
        inset 0 3px 8px
        rgba(255, 255, 255, 0.24);

    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease;
}

[data-alternative-id].kids-color-answer-fixed:hover::after {
    transform: scale(1.06);

    box-shadow:
        0 0 0 3px
        rgba(108, 92, 231, 0.25),
        0 13px 25px
        rgba(55, 48, 85, 0.20);
}

[data-alternative-id].kids-color-answer-fixed:active::after {
    transform: scale(0.95);
}

/* Branco precisa de uma borda mais visível. */
[data-alternative-id]
.kids-color-answer-fixed[
    data-kids-color-name="branco"
]::after,
[data-alternative-id].kids-color-answer-fixed[
    data-kids-color-name="branco"
]::after {
    box-shadow:
        0 0 0 3px
        rgba(91, 84, 120, 0.30),
        0 10px 20px
        rgba(55, 48, 85, 0.17);
}

@media (max-width: 560px) {
    [data-alternative-id]
    .kids-color-answer-fixed,
    [data-alternative-id].kids-color-answer-fixed {
        min-height: 116px !important;
    }

    [data-alternative-id]
    .kids-color-answer-fixed::after,
    [data-alternative-id].kids-color-answer-fixed::after {
        width: 72px;
        height: 72px;
    }
}