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

// Check-box input 
@mixin checkboxes {
    &.checkbox-set {
        label {
            display: block;
            color: $add-user-form-title-color;
            font-size: 16px;
            margin-bottom: 5px;
        }

        .checkboxes {
            display: flex;
            gap: 10px;

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

            // Style the label as a button 
            label.checkbox {
                cursor: pointer;
                padding: 12px; 
                border: 1px solid $user-form-checkbox-button-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 {
                    background-color: $user-form-checkbox-button-hover-color;
                    border-color: $user-form-checkbox-button-hover-border-color; 
                }
            }

            // Indicate when checkbox is checked
            input[type="checkbox"]:checked + label.checkbox {
                background-color: $user-form-checkbox-button-active-color;
                color: $user-form-checkbox-button-active-text-color;
            }
        }
    }
}