RocketChat/Rocket.Chat

@import '../../../styles/colors';
@import '../../../styles/variables';

$form-field-label-color: $color-text-dark;
$form-field-label-error-color: $color-red;
$form-field-label-font-size: 0.75rem;
$form-field-label-font-weight: 600;
$form-field-label-line-height: 1rem;

$form-field-description-color: $color-text-grey;
$form-field-description-font-size: 0.75rem;
$form-field-description-font-weight: 500;
$form-field-description-line-height: 1rem;

$form-field-error-color: $color-red;
$form-field-error-border-color: $color-red;

.form-field {
    display: flex;

    width: 100%;
    margin: 5px 0;
    flex-flow: column nowrap;

    &__label-wrapper {
        display: flex;
        flex: 1 0 auto;
        flex-flow: column nowrap;
    }

    &__label,
    &__input,
    &__description {
        margin: 3px 0;
    }

    &__label {
        flex: 0 0 auto;

        transition: color $default-time-animation;
        text-align: left;
        white-space: nowrap;
        letter-spacing: 0;
        text-overflow: ellipsis;

        color: $form-field-label-color;

        font-size: $form-field-label-font-size;
        font-weight: $form-field-label-font-weight;
        line-height: $form-field-label-line-height;
    }

    &__input {
        display: flex;
        flex: 1 0 auto;
    }

    &__description {
        flex: 0 0 auto;

        min-height: $form-field-description-line-height;

        transition: color $default-time-animation;

        color: $form-field-description-color;

        font-size: $form-field-description-font-size;
        font-weight: $form-field-description-font-weight;
        line-height: $form-field-description-line-height;
    }

    &--error {
        .form-field__label,
        .form-field__input,
        .form-field__description {
            color: $form-field-error-color;
        }
    }

    &--required {
        .form-field__label::after {
            content: " *";
        }
    }
}