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

.placeholder-icon-right-side {
    position: absolute;
    right: 4px;

    &.green {
        svg {
            path {
                fill: $default-placeholderIcon-green;
            }
        }
    }

    &.purple {
        svg {
            path {
                fill: $default-placeholderIcon-purple;
            }
        }
    }

    &.blue {
        svg {
            path {
                fill: $valid-placeholderIcon;
            }
        }
    }

    &.orange {
        svg {
            path {
                fill: $default-placeholderIcon-orange;
            }
        }
    }
    
    &.red {
        svg {
            path {
                fill: $default-placeholderIcon-red;
            }
        }
    }

    &::before {
        content: '';
        display: block;
        height: 15px;
        width: 1px;
        border-radius: 3px;
        position: absolute;
        right: 22px;
        top: 55%;
        transform: translateY(-50%);
        background-color: $default-placeholderIcon-pipe;
    }

    &.focus {
        &::before {
            background-color: $default-focus-placehilderIcon-pipe;
        }
    }

    &.valid-focus-out {
        &::before {
            background-color: $valid-placeholderIcon-pipe;
        }
    }

    &.valid-focus-in {
        &::before {
            background-color: $valid-focus-placeholderIcon-pipe;
        }
    }

    &.invalid-focus-out {
        &::before {
            background-color: $invalid-placeholderIcon-pipe;
        }
    }

    &.invalid-focus-in {
        &::before {
            background-color: $invalid-focus-placeholderIcon-pipe;
        }
    }
}