@import '../node_modules/sh-core/src/base';

.sh-input-text {
    display: inline-block;
    height: 50px;
    width: 100%;

    label {
        position: relative;
        display: block;
        height: 50px;
        width: 100%;
    }

    .label {
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;

        font-size: $size-font-small;
        color: $color-font-label;
        text-transform: uppercase;
        z-index: 1;
        @include ellipsis;
    }

    &.empty {
        input {
            background: $color-box-background5;
        }
    }

    &.sh-invalid {
        &.sh-touched {
            input {
                border: 1px solid $color-error;
            }
        }
    }

    input {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        padding: 25px 5px 5px 5px;

        color: $color-font;
        border-radius: $size-border-radius-small;
        background: transparent;

        transition: background $transition-hover, box-shadow $transition-fast, border $transition-fast;
        border: 1px solid $color-transparent;

        @include focus;

        &:hover {
            background: $color-box-background5;
        }

        @mixin placeholder {
            color: $color-primary;
            font-weight: $font-weight-bold;
            opacity: 1;
        }

        &::-moz-placeholder {
            @include placeholder;
        }

        &:-ms-input-placeholder {
            @include placeholder;
        }

        &::-webkit-input-placeholder {
            @include placeholder;
        }
    }

    .required-label {
        font-size: $size-font-small;
        text-transform: uppercase;
        opacity: 0;
        position: absolute;
        right: 4px;
        top: 4px;
        color:$color-line4;

        &.show-required {
            opacity: 1;
        }
    }
}