@in-image-height: 26px;
@in-image-height-small: 12px;
@in-image-width: 46px;
@in-image-width-small: 28px;
@in-image-gap: 10px;

.in-image {
    position: relative;
    float: left;
    margin-right: @in-image-gap;
    width: @in-image-width;

    &--small {
        height: @in-image-height-small;
        line-height: @in-image-height-small;
        width: @in-image-width-small;

        .in-image__in {
            height: @in-image-height-small;
            line-height: @in-image-height-small;
            width: @in-image-width-small;
        }
    }

    &--long-bordered {
        top: 9px;
        height: @in-image-height;
        line-height: @in-image-height;
        width: 56px;
        box-sizing: content-box;
    }

    &__in {
        position: relative;
        display: flex;
        justify-content: center;
        color: @color-f;
        width: @in-image-width;
        line-height: @in-image-height;

        font-size: 12px;
        font-weight: 700;

        .input__domain & {
            height: auto;
        }

        .in-image--long-bordered & {
            height: auto;
            padding-top: 5px;
            padding-left: 10px;
        }

        .in-product-visibility &,
        .list-domain__item__image &,
        .form-line__box & {
            height: 26px;
        }

        &--1 {
            background-color: #b04454;
        }
        &--2 {
            background-color: #c357a1;
        }
        &--3 {
            background-color: #a157c3;
        }
        &--4 {
            background-color: #6657c3;
        }
        &--5 {
            background-color: #578fc3;
        }
        &--6 {
            background-color: #57c3b8;
        }
        &--7 {
            background-color: #57c357;
        }
        &--8 {
            background-color: #adc357;
        }
        &--9 {
            background-color: #c38f57;
        }
    }
}