@import '../../styles/color';
@import "../../styles/sizes";
@import "../../styles/typography";

.one-ui-form-item {
    $root: &;
    @include setMargin();

    display: flex;
    flex-direction: column;
    width: 100%;

    &__label {
        padding-bottom: 6px;
    }

    &__content {
        position: relative;

        &:after {
            display: flex;
            justify-content: center;
            align-items: center;
            content: "!";
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: color(red);
            color: color(white);
            font-size: 9px;
            text-align: center;
            font-weight: 900;
            position: absolute;
            top: 50%;
            left: 0;
            opacity: 0;
            transform: translate(-50%, -50%) scale3d(0, 0, 0);
            transition: all .3s ease;
        }
    }

    &__error {
        position: absolute;
        top: 0;
        width: 100%;
        transform: translateY(-100%) scale3d(0, 0, 0);
        transition: all .3s ease;
        opacity: 0;
    }

    &--fontWight{
        &-bold #{$root}__label{
            @include font('bold')
        }
        &-regular #{$root}__label{
            @include font('regular')
        }
    }

    &--hasError {
        #{ $root }__content {
            &:after {
                opacity: 1;
                transform: translate(-50%, -50%) scale3d(1, 1, 1);
            }
        }
    }

    &--focused {
        #{ $root }__error {
            opacity: 1;
            transform: translateY(-100%) scale3d(1, 1, 1);
        }

        #{ $root }__content {
            &:after {
                transform: translate(-50%, -50%) scale3d(0, 0, 0);
                opacity: 0;
            }
        }
    }
}