@import 'commons';

.m-textfield {
    position: relative;

    @include m-input-inline-spacing();

    &__icon-password {
        margin-left: $m-space;
    }

    &__reset,
    &__icon-password {

        &.m--is-enter-active,
        &.m--is-leave-active {
            transition: opacity $m-transition-duration-sm linear;
        }

        &.m--is-enter,
        &.m--is-leave-to {
            opacity: 0;
        }
    }

    &__validation {
        transition: margin-top $m-transition-duration ease;
        display: flex;
        justify-content: flex-end;

        &-message {
            flex: 1 1 auto;
        }

        &-character-count {
            flex-shrink: 0;
        }
    }
}