.radio-circles {
    display: flex;
    gap: var(--spacing-2);
    flex-wrap: wrap;

    &.vertical {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    &.intensity-scale {
        gap: var(--spacing-1);

        .radio-circle-label {
            width: var(--spacing-8);
            height: var(--spacing-8);
            font-size: var(--text-sm);
        }
    }
}

.radio-circle {
    position: relative;
    cursor: pointer;

    input[type="radio"] {
        position: absolute;
        opacity: 0;
        pointer-events: none;

        &:checked + .radio-circle-label {
            background: rgba(var(--primary-rgb), var(--opacity-10));
            border-color: var(--primary);
            color: var(--primary);
            font-weight: var(--font-semibold);
        }

        &:focus + .radio-circle-label {
            box-shadow: var(--focus-ring-sm);
        }
    }

    &:hover .radio-circle-label {
        border-color: var(--primary);
    }

    &.correct .radio-circle-label {
        background:
            var(--gradient-primary) padding-box,
            var(--gradient-primary) border-box;
        border-color: transparent;
        color: var(--white);
        font-weight: var(--font-semibold);
    }

    &.correct:hover .radio-circle-label {
        border-color: var(--primary);
    }
}

.radio-circle-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--spacing-10);
    height: var(--spacing-10);
    background: var(--surface);
    border: 2px solid var(--border-color-strong);
    border-radius: var(--rounded-full);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

@media (max-width: 639px) {
    .radio-circle-label {
        width: var(--spacing-8);
        height: var(--spacing-8);
        font-size: var(--text-sm);
    }
}