@import './ca-input.colors.scss';

.ca-placeholder-text {
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    top: 50%;
    transform: translateY(-50%);
    color: $default-placeholderIcon;
    
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    padding-left: 1px;


    svg {
        text {
            fill: $default-placeholderIcon;
        }
    }

    &.inactive-filled {
        color: $inactive-filled-placeholderText;
        svg {
            text {
                fill: $inactive-filled-placeholderText;
            }
        }
    }

    &.focus {
        color: $default-focus-placeholderText;
        svg {
            text {
                fill: $default-focus-placeholderText;
            }
        }
    }

    &.valid-focus-in {
        color: $valid-focus-placeholderText;
        svg {
            text {
                fill: $valid-focus-placeholderText;
            }
        }
    }

    &.valid-focus-out {
        color: $valid-placholderText;
        svg {
            text {
                fill: $valid-placholderText;
            }
        }
    }

    &.invalid-focus-in {
        color: $invalid-focus-placeholderText;

        svg {
            text {
                fill: $invalid-focus-placeholderText;
            }
        }
    }

    &.invalid-focus-out {
        color: $invalid-placeholderText;

        svg {
            text {
                fill: $invalid-placeholderText;
            }
        }
    }
}