// pure css version of the required styles, rely only on css variables

// overwrite default bs styles for consistency if you use css variables
.form-control-focus,
.form-control:focus {
    color: var(--bs-body-color, #212529);
    background-color: var(--bs-form-control-bg, var(--bs-body-bg, #fff));
    border-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.5); // default styles use set color at the moment
    outline: 0;
    box-shadow: 0 0 0 var(--bs-focus-ring-width) rgba(var(--bs-primary-rgb, 13, 110, 253), 0.25);
}

.was-validated :valid+.form-control-focus,
.was-validated :valid+.form-control:focus {
    border-color: var(--bs-success, #198754);
    box-shadow: 0 0 0 var(--bs-focus-ring-width) rgba(var(--bs-success-rgb, 25, 135, 84), 0.25);
}

.was-validated :invalid+.form-control-focus,
.was-validated :invalid+.form-control:focus {
    border-color: var(--bs-danger, #dc3545);
    box-shadow: 0 0 0 var(--bs-focus-ring-width, 0.25rem) rgba(var(--bs-danger-rgb, 220, 53, 69), 0.25);
}

.form-floating .form-control.form-placeholder-shown:not(.form-control-focus)~label {
    opacity: unset;
    transform: unset;
}

// Otherwise it can go over the dropdown
.form-floating .form-control~label {
    z-index: unset;
}

.form-control-disabled {
    background-color: var(--bs-form-control-disabled-bg, var(--bs-secondary-bg, #e9ecef));
    opacity: 1;
}

.tags-menu mark {
    text-decoration: underline;
    background: none;
    color: currentColor;
    padding: 0;
}

// Hide drop icon when max is reached
.form-control.is-max-reached {
    background-image: none;
}