@import '../styles/_variables.scss';

.charcount {
    color: $font-dark-gray;
    position: absolute;
    right: 1px;
    top: -5px;
    font-size: 10px;
    transform: translateY(-100%);
    transition: color 0.1s ease-in-out;
    pointer-events: none;

    [dir='rtl'] & {
        right: auto;
        left: 1px;
    }

    &.invalid {
        color: $red-error;
    }
    &.inside {
        color: $text-dark-gray;
        right: 30px;
        top: auto;
        bottom: -5px;

        [dir='rtl'] & {
            right: auto;
            left: 30px;
        }
    }
}