@import '_mixins';
@import '_vars';

$form-color: #fff;

:host(.ng-invalid) {
    &.ng-dirty {
        .form-control {
            & {
                border-color: $color-theme-error;
            }

            &:hover,
            &:focus {
                border-color: $color-theme-error-dark;
            }
        }
    }
}

.form-control {
    &[readonly] {
        background: $form-color;
    }
}

.date-group {
    & {
        padding-right: .25rem;
    }

    .form-control {
        width: 7.5rem;
    }
}

.time-group {
    .form-control {
        width: 7.5rem;
    }
}