@mixin BackgroundGradient {
    background: linear-gradient(135deg, #fe01da 0%, var(--light-blue-100) 100%);
    border: var(--border-1) solid var(--white-opacity-30);
}

@mixin BackgroundGradientHover {
    background: linear-gradient(0deg, #2223, #2223), linear-gradient(135deg, #fe01da 0%, var(--light-blue-100) 100%);
    border: var(--border-1) solid #2222224d;
}

.be-ContentAnswersOpenButton {
    &:not(:disabled):focus,
    &:not(:disabled):hover {
        background-color: var(--gray-10);
    }

    &.be-ContentAnswersOpenButton--hasQuestions {
        @include BackgroundGradient;

        svg {
            path {
                fill: var(--gray-white);
            }
        }

        &:hover {
            @include BackgroundGradientHover;
        }

        &:not(:disabled):focus {
            @include BackgroundGradientHover;

            box-shadow:
                0 0 0 1px var(--gray-white),
                0 0 0 3px var(--light-blue-100);
        }
    }
}