@use "../colors" as *;
@use "../vars" as *;

// Radio buttons 
@mixin radio-buttons {
    &.radio-input {
        .radio-group {
            display: flex;
            gap: 10px;

            // Hide the actual radio buttons
            input[type="radio"] {
                display: none;
            }

            // Style the labels like buttons
            label.radio {
                width: 100%;
                height: 100%;
                border-radius: $input-field-border-radius;
                cursor: pointer;
                padding: 12px; 
                border: 1px solid $add-user-input-border-color;
                border-radius: $input-field-border-radius;
                background-color: $add-user-input-background;
                font-size: 16px;
                text-align: center;
                width: 100%; 
                transition: background-color 0.3s, color 0.3s, border-color 0.3s;
                user-select: none;

                // Hover & Focus
                &:hover,
                &:focus {
                    background-color: $user-form-radio-button-hover-color;
                    border-color: $user-form-radio-button-hover-border-color;
                }
            }

            // Radio button checked
            input[type="radio"]:checked + label.radio {
                background-color: $user-form-radio-button-active-color;
                color: $user-form-radio-button-active-text-color;
                border-color: $user-form-radio-button-active-border-color;
            }
        }
    }
}