@import './styles/<!--partnerName--settings-->';
@import './styles/tools';

.c-floating-label-input-component {
    position: relative;
}

    .c-floating-label-input-component__input {
        border: $c-input-border;
        box-shadow: none;
        height: $c-input-height;
        padding: $c-input-padding;
        font-size: $c-input-font-size;
        font-weight: $c-input-font-weight;
        width: 100%;
        transition: border-color $default-animation-enter;
        background-color: $c-input-background-color;
        color: $c-input-color;
        border-radius: $c-input-border-radius;

        &:focus {
            outline: none;
            border: $c-input-border--focused;
            transition-duration: $default-animation-time-exit;
        }

        &.ngrx-forms-pristine:-webkit-autofill + .c-floating-label-input-component__label {
            display: none;
        }
    }

    .c-floating-label-input-component__textarea-input {
        padding-top: 12px;
        min-height: 10rem;
        resize: vertical;
    }

        .c-floating-label-input-component__input--has-value {
            padding-top: $c-input-padding-top-has-value;
        }

        .c-floating-label-input-component__input--invalid {
            border: $c-input-border--invalid;
        }

    %text-label-common {
        font-family: $c-input-font-family;
        font-size: $c-label-font-size;
        color: $c-input-label-color;
        position: absolute;
        left: $c-input-padding-horizontal +
            $c-input-border-width;
        transform-origin: $c-input-floating-label-transform-origin;
        transition: $c-input-floating-label-transition;
    }
    .c-floating-label-input-component__label {
        @extend %text-label-common;
        top: 50%;
        pointer-events: none;
        transform: $c-input-floating-label-start-transform;
    }
    .c-floating-label-input-component__textarea-label {
        @extend %text-label-common;
        top: 0;
        transform: $c-input-floating-label-start-textarea-transform;
    }

        .c-floating-label-input-component__label--has-value {
            transform: $c-input-floating-label-end-textarea-transform;
        }
        .c-floating-label-input-component__label--has-value:not(.c-floating-label-input-component__label--textarea-label) {
            transform: $c-input-floating-label-end-transform;
        }