.input-control {
    padding: 16px 0;

    &:first-child {
        padding-top: 0;
    }

    &:last-child {
        padding-bottom: 0;
    }

    &__text {
        margin: 8px 0;
        font-size: 1em
    }

    &__label {
        font-size: 1em;
        font-weight: $labelFontWeight;
    }

    &__input {
        margin-bottom: 8px;
        @include transition(all .2s ease-in);

        &:last-child {
            margin-bottom: inherit;
        }

        &::selection {
            background-color: $defaultDarkSelectionColor;
        }

        &.error {
            color: $errorColor;
            border-color: $errorColor;
        }
    }

    &__em {
        color: $inputControlEmColor;
    }

    &__hint {
        margin-top: 0;
        font-size: $hintFontSize;

        span {
            vertical-align: middle;
        }

        &_error {
            color: $errorColor;
        }
    }

    &__container {
        position: relative;
        width: 100%;
        margin-top: 5px;
        margin-bottom: 5px;
        @include flex();

        .button-control {
            margin: 1px 0 1px 10px;
        }
    }

    &__right {
        position: absolute;
        right: 0;
    }
}

/**
 * Set a specific color for read only style.
 */
input:read-only {
    color: $readOnlyInputColor;
}