////
/// @group Form
/// @author Mustard-UI@v1, Michael Becker
////

///
.validation-error {
    margin-top: 2px;
    font-size: 0.785em;
    color: $input-error-text-color;
}

///
#{$label-selector} {
    font-size: 0.875rem;
    font-weight: $input-label-font-weight;

    > span {
        display: block;
        margin-bottom: 0.128em;
        margin-left: space(1);
    }
}

///
#{$input-selector} {
    appearance: none;
    display: block;
    width: 100%;
    padding: 0.6em 0.8em;
    font-size: 0.875rem;
    font-weight: inherit;
    color: $font-color;
    background: $input-bg-color;
    border-radius: $input-border-radius;
    border: $input-border-width solid $input-border-color;

    &.invalid, &:invalid {
        border-color: $input-invalid-color;
    }
}

///
#{$input-base-selector} {
    &::placeholder {
        color: $input-placeholder-color;
    }

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

    &:invalid, &:invalid {
        border-color: $input-error-text-color;
    }
}

///
#{$input-fieldset-selector} {
    margin: space(3) 0;
    padding: space(2) space(3);
    font-size: 0.875rem;
    border: $input-border-width solid $input-border-color;
    border-radius: $input-border-radius;

    legend {
        padding: 0 space(1);
    }
}

///
#{$input-option-selector} {
    margin-right: space(1);
}

///
#{$input-range-selector} {
    appearance: range
}

///
#{$input-color-selector} {
    display: initial;
    padding: 0;
    height: 42px;
}