@use '~@/style/globals';
@use 'sass:math';

.FormField {
    $block: &;

    flex: 1;

    &__label {
        display: block;
        padding: math.div(globals.$input-padding-vertical, 1.8) 0;

        &__required {
            color: globals.$text-danger-color;
        }
    }

    &__input-wrapper {
        flex: 1;
        display: flex;
        flex-wrap: nowrap;
    }

    &__input,
    &__textarea,
    &__datepicker,
    &__static-value {
        width: 90%;
    }

    &__static-value {
        margin: 0;
        padding: 10px 0;
        font-weight: 500;
        font-style: italic;
    }

    &__switch {
        display: flex;
    }

    &__addon {
        display: inline-block;
        min-width: 2.7rem;
        padding: globals.$input-padding-vertical globals.$input-padding-horizontal;
        border: globals.$input-border-size solid globals.$bg-color-input-normal;
        border-left: 0;
        border-radius: 0 globals.$input-border-radius globals.$input-border-radius 0;
        background-color: globals.$bg-color-input-normal;
        color: globals.$color-input;
    }

    &__textarea {
        min-height: 50px;
    }

    &__help,
    &__error {
        flex: 0 0 100%;
        margin-top: 0.3rem;
    }

    &__error {
        color: globals.$text-danger-color;

        &__text {
            padding-left: globals.$form-label-width;
        }
    }

    &--with-addon {
        #{$block}__input {
            display: inline-block;
            padding-right: 0;
            border-right: 0;
            border-radius: globals.$input-border-radius 0 0 globals.$input-border-radius;

            &:focus + #{$block}__addon {
                border-color: globals.$input-focus-border-color;
            }
        }
    }

    &--with-error {
        #{$block}__input:not(:focus),
        #{$block}__datepicker .mx-input:not(:focus),
        #{$block}__select:not(:focus),
        #{$block}__textarea:not(:focus),
        #{$block}__addon {
            border-color: globals.$input-error-border-color;
        }
    }

    @media screen and (min-width: globals.$screen-tablet) {
        display: flex;
        flex-flow: row wrap;
        align-items: center;

        &__label {
            flex: 0 0 globals.$form-label-width;
            padding: 0 globals.$input-padding-horizontal;
            text-align: right;
        }

        &__input,
        &__textarea,
        &__datepicker,
        &__static-value {
            flex: 1;
        }

        &__addon {
            flex: 0 0 auto;
        }
    }
}
