.c-input {
    @extend $input-field;

    /textarea& {
        padding-top: 30px;

        scrollbar();
    }

    +placeholder() {
        color: transparent;
    }


    &:focus, 
    &:not(:placeholder-shown) {
        & ~ .c-input__label {
            top: 8px;
            transform: none;
            font-size: calc(1rem - 3px);
        }
    }

    &--valid {
        & ~ .c-input__icon {
            color: $color--success;
        }
    }

    &--error {
        border-width: 2px;
        border-color: $color--danger;
        padding-left: 19px;
        padding-right: @padding-left;

        &:hover, &:focus {
            border-color: @border-color;
        }

        & ~ .c-form__msg {
            color: @border-color;
        }
    }

    &--disabled, &[disabled] {
        background-color: $color--gray-2;
        border-color: transparent;
    }

    &--has-link {
        padding-right: 80px;
    }

    &__link {
        display: inline-block;
        position: absolute;
        top: 30px;
        right: 10px;
        transform: translate(0, -50%);
        max-width: 64px;
        background-color: #fff;
        font-size: calc(1em - 2px);
        text-ellipsis();
        transition: .3s ease-out;
    }

    &--has-icon {
        padding-right: 45px;
    }

    &__icon {
        @extend $input-icon;
    }

    &__label {
        position: absolute;
        top: 30px;
        left: 20px;
        transform: translate(0, -50%);
        font-size: calc(1rem + 2px);
        font-weight: $font--regular;
        color: $color--gray-1;
        line-height: 1;
        pointer-events: none;
        transition: .2s ease-out;
    }
}

// media picker

.c-input-file {
    position: absolute;
    width: 100%;
    height: @width;
    opacity: 0;

    &:hover {
        & ~ .c-input-file__label {
            border-color: $color--main;
        }

        & ~ .c-input__icon {
            color: $color--main;
        }
    }

    &__label {
        @extend $input-field;
        display: block;
        padding-top: 21px;
        font-weight: $font--regular;
        color: $color--gray-1;
        line-height: 1;
    }
}