.field.vehicle-id
{
    .control
    {
        position: relative;
        @include for-at-least-normal-tablets
        {
            width: steps(14);
        }

        &::before
        {
            content: svg-image-data-url("number-plate");

            position: absolute;

            width: 29px;
            height: 48px;

            pointer-events: none;
        }

        input
        {
            padding-left: 49px;
            text-transform: uppercase;
        }
    }

    &.with-description
    {
        .control,
        .description
        {
            float: left;
        }

        .control
        {
            margin-right: steps(2);
        }
    }
}

.field
{
    .control.small
    {
        @include for-at-least-normal-tablets
        {
            width: steps(13);
        }
    }

    .control.short-description
    {
        display: flex;
        height: fit-content;
        font-size: 16px;
        line-height: steps(2);

        @include for-at-least-tablets
        {
            width: steps(26);
        }

        .svg.warning
        {
            color: $color-link-normal;
        }

        > span:not(.svg)
        {
            padding-left: steps(1);
            width: fit-content;
        }
    }

    .control.exact
    {
        display: flex;
        align-items: center;
    }
}
