.rh-form-group {
    /* Box-modell/beteende */
    margin-bottom: 0.9375em;

    // Using when an input text control has an icon that is within
    &--has-icon {
        /* Positionering */
        position: relative;
    }
}

.rh-form {
    &__control {
        /* Box-modell/beteende */
        display: block;
        height: 2.125em;
        width: 100%;
        padding: 0.375em 0.75em;

        /* Typografi */
        font-size: $FORM__CONTROL--FONT-SIZE;
        line-height: $FORM__CONTROL--LINE-HEIGHT;

        /* Visuellt */
        @if $FORM__CONTROL--BACKGROUND-COLOR {
            background-color: $FORM__CONTROL--BACKGROUND-COLOR;
        }
        border: $FORM__CONTROL--BORDER;
        border-radius: $FORM__CONTROL--BORDER-RADIUS;
        /* Typografi */
        @if $FORM__CONTROL-TEXT--COLOR {
            color: $FORM__CONTROL-TEXT--COLOR;
        }

        &:focus {
            /* Visuellt */
            border: $FORM__CONTROL--FOCUS-BORDER;

            /* Typografi */
            color: $FORM__CONTROL-TEXT--FOCUS-COLOR;
        }

        &:disabled {
            /* Visuellt */
            border: $FORM__CONTROL--DISABLED-BORDER;
            background-color: $FORM__CONTROL--DISABLED-BACKGROUND-COLOR;

            /* Blandat/övrigt */
            cursor: not-allowed;
        }

        &--success {
            /* Visuellt */
            border: $FORM__CONTROL--SUCCESS-BORDER;
        }

        &--error {
            /* Visuellt */
            border: $FORM__CONTROL--ERROR-BORDER;
        }
    }

    &__label {
        display: inline-block;
        max-width: 100%;
        margin-bottom: 0.3125em;

        &-text--required {
            color: $FORM__TEXT--REQUIRED-COLOR;
        }
    }

    &__text {
        &--muted {
            font-size: $FORM__TEXT--MUTED-FONT-SIZE;
        }

        &--required {
            color: $FORM__TEXT--REQUIRED-COLOR;
        }
    }
}

// Form icon is using for the input text control
.rh-form-icon {
    /* Positionering */
    position: relative;
    top: 0.0625em;

    /* Box-modell/beteende */
    display: inline-block;

    /* Typografi */
    font-family: $FORM__ICON--FONT-FAMILY;
    font-style: normal;
    font-weight: normal;
    line-height: $FORM__ICON--LINE-HEIGHT;

    &__placeholder {
        /* Positionering */
        position: absolute;
        top: 1.25em;
        right: 0;
        z-index: $FORM__ICON-PLACEHOLDER--Z-INDEX;

        /* Box-modell/beteende */
        display: block;
        height: 2.125em;
        width: 2.125em;

        /* Typografi */
        line-height: $FORM__ICON-PLACEHOLDER--LINE-HEIGHT;
        text-align: $FORM__ICON-PLACEHOLDER--TEXT-ALIGN;
    }

    &--success:before {
        /* Typografi */
        color: $FORM__ICON--SUCCESS-COLOR;

        /* Blandat/övrigt */
        content: "\e83f";
    }

    &--error:before {
        /* Typografi */
        color: $FORM__ICON--ERROR-COLOR;

        /* Blandat/övrigt */
        content: "\e81e";
    }
}