@import '../../common/styles/_abstract-control';
@import '../../common/styles/colors';
@import '../../common/styles/color-utils';
@import '../../common/styles/text-base';
@import '../../common/styles/spacing-base';

@chip-spacing: @spacing-base * 4;

.bloko-chips-chip {
    display: inline-block;
    position: relative;
    margin-right: 8px;
    cursor: pointer;
}

.bloko-chips-chip__input {
    position: absolute;
    clip: rect(0 0 0 0);
}

.bloko-chips-chip__content {
    display: inline-block;
    background: @color-white;
    color: @color-gray-80;
    border-radius: 16px;
    padding: 5px 16px;
    border: 1px solid @color-gray-40;

    ._generate-active-and-hover(@color-white, @color-gray-40, -5);
    .bloko-text-medium();
}

.bloko-chips-chip__input:focus + .bloko-chips-chip__content {
    ._move-color-hsv-value(border-color, @color-gray-40, -20);
}

.bloko-chips-chip__input:global(.focus-visible) + .bloko-chips-chip__content {
    .abstract-control-focus-visible();
}

.bloko-chips-chip-link {
    display: inline-block;
    background: @color-gray-20;
    color: @color-gray-80;
    border-radius: 16px;
    padding: 6px 16px;
    margin-right: 8px;

    .bloko-text-medium();

    &:global(.focus-visible) {
        .abstract-control-focus-visible();
    }

    &:hover,
    &:focus {
        color: @color-gray-80;
        ._move-color-hsv-value(background-color, @color-gray-20, -5);
    }

    &:active {
        color: @color-gray-80;
        ._move-color-hsv-value(background-color, @color-gray-20, -10);
    }
}

.bloko-chips-multiline-container {
    margin-bottom: -@chip-spacing;
}

.bloko-chips-multiline-container .bloko-chips-chip-link {
    margin-bottom: @chip-spacing;
}

.bloko-chips-multiline-container .bloko-chips-chip {
    margin-bottom: @chip-spacing;
}

.bloko-chips-chip__input:checked + .bloko-chips-chip__content {
    background: @color-gray-20;
    ._generate-active-and-hover(@color-gray-20, @color-gray-40, 5);
}

._generate-active-and-hover(@background, @border, @background-color-offset) {
    &:hover {
        ._move-color-hsv-value(border-color, @border, -20);
    }

    &:active {
        ._move-color-hsv-value(border-color, @border, -20);
        ._move-color-hsv-value(background-color, @background, @background-color-offset);
    }
}