$transition: 0.5s ease;

.ubx-field-block {
    &__prefix, &__suffix {
        width: 2.5em;
    }
    &__infix {
        width: 100%;
    }
    &__appearance {
        color: color(lte);

        &.hover {
            color: color(lte, 900);
        }
        @each $type in $types {
            &.#{$type}.focus {
                color: color($type);
            }
        }
        &.invalid {
            color: color(dgr) !important;
        }
    }
    &__outline {
        border: 1px solid;
        transition: border-color $transition, color $transition;

        &.start {
            width: 0.4166666667em;
            border-right: none;
            border-radius: 5px 0 0 5px;
        }
        &.middle {
            border-left: none;
            border-right: none;

            &.focus, &.value {
                border-top-color: transparent !important;
            }
        }
        &.end {
            width: 0.4166666667em;
            border-left: none;
            border-radius: 0 5px 5px 0;
        }
        &.prefix, &.suffix {
            width: 2.5em;
        }
    }
    &__label {
        font-size: 1em;
        transition: font-size $transition, transform $transition;

        &.focus, &.value {
            font-size: 0.5em;
            transform: translateY(-2.5em);
        }
    }
}