.input-element {
    margin-bottom: 10px;
    padding: 5px 0;

    .input-label {
        font-family: SFUIDisplayRegular, sans-serif;
    }

    .input-field {
        font-family: SFUIDisplayMedium, sans-serif;
    }

    // inputBind
    .input-bind-field {
        @include display-flex();
        @include flex-wrap(wrap);
        width: 100%;

        .input-bind-value,
        .input-bind-placeholder {
            font-size: 14px;
            font-family: SFUIDisplayMedium, sans-serif;
            border: 1px solid $color-grey-light;
            padding: 6px 16px;
            border-radius: 5px;
            flex: 1 1 auto;
            min-height: 30px;

            &.disabled {
                border-color: transparent;
                background-color: $color-input-disabled;
            }

            &:not(:first-child) {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }

            &:not(:last-child) {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }
        }

        &.disabled .input-bind-value,
        &.disabled .input-bind-placeholder {
            border-color: transparent;
            background-color: $color-input-disabled;
        }

        &.error .input-bind-value,
        &.error .input-bind-placeholder {
            border-color: $color-red-lighten;
        }

        .input-bind-icon {
            @include display-flex();

            & > i {
                @include display-flex();
                @include align-items(center);
                @include justify-content(center);
                font-size: 20px;
                padding: 0 5px;
                background-color: #edf1f2;
                color: $color-grey-dark;

                &:focus, &:hover {
                    color: $color-blue;
                    cursor: pointer;
                }
            }

            &.prepend > i {
                border: 1px solid $color-grey-light;
                border-right: none;
            }

            &.append > i {
                border: 1px solid $color-grey-light;
                border-left: none;
                font-size: 14px;

                &.fa-bars {
                    font-size: 13px;
                }
                &.icon-close {
                    font-size: 10px;
                }
            }

            &.prepend > i:first-child {
                border-top-left-radius: 5px;
                border-bottom-left-radius: 5px;
            }

            &.append > i:last-child {
                border-top-right-radius: 5px;
                border-bottom-right-radius: 5px;
            }
        }
    }

    .error-hint {
        bottom: -41px;
    }
}