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

// Input fields and drop-down menu styling
@mixin input_fields {
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="date"],
    input[type="number"],
    input[type="datetime-local"], 
    input[type="tel"],
    select {
        width: 100%; // Full width of the form group div
        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;
        transition: border-color 0.3s, background-color 0.3s;

        &:focus {
            border-color: $add-user-input-focus-border-color; 
            outline: none;
        }
    }
}