/* Field */
.kt-ui-selector {
    container-name: kt-ui-selector;
    container-type: inline-size;
}

.kt-ui-selector:focus-visible {
    outline: none;
}

.kt-ui-selector.is-open .ui-ctl-element,
.kt-ui-selector:focus-visible .ui-ctl-element {
    border-color: var(--ui-field-color-primary);
}

.kt-ui-selector.is-single.ui-ctl-ext-after-icon,
.kt-ui-selector.is-single.ui-ctl-after-icon .ui-ctl-element {
    padding-right: var(--kt-ui-selector-ctl-after-width) !important;
}

.bx-firefox .kt-ui-selector.is-single.ui-ctl-after-icon .ui-ctl-element {
    padding-right: calc(var(--kt-ui-selector-ctl-after-width) - 5px) !important;
}

/*
    Показываем стили при наведении, только если не выбрано ни одно значение.
    У множественного селекта плитки, которые имеют свои стили при наведении
    и если оставить как есть, то при наведнии плитка сливается с полем
*/
.kt-ui-selector.is-multiple:not(:has(.kt-ui-selector__value-container:empty)) .ui-ctl-element:hover,
.kt-ui-selector.is-multiple:not(:has(.kt-ui-selector__value-container:empty)) .ui-ctl-hover .ui-ctl-element,
.kt-ui-selector.is-multiple:not(:has(.kt-ui-selector__value-container:empty)) .ui-ctl-hover .ui-ctl-element:hover {
    color: var(--kt-ui-selector-color);
    border-color: var(--kt-ui-selector-border-color);
    background-color: var(--kt-ui-selector-bg-color);
}

.kt-ui-selector.is-multiple:not(:has(.kt-ui-selector__value-container:empty)) .ui-ctl-element:active,
.kt-ui-selector.is-multiple:not(:has(.kt-ui-selector__value-container:empty)) .ui-ctl-active .ui-ctl-element,
.kt-ui-selector.is-multiple:not(:has(.kt-ui-selector__value-container:empty)) .ui-ctl-active .ui-ctl-element:active {
    color: var(--kt-ui-selector-color);
    border-color: var(--kt-ui-selector-border-color);
    background-color: var(--kt-ui-selector-bg-color);
}
/* End field */

/* Clear btn */
.kt-ui-selector-clear-btn {
    width: var(--kt-ui-selector-clear-btn-size);
    height: var(--kt-ui-selector-clear-btn-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
/* End clear btn */

/* Dropdown arrow */
.kt-ui-selector .ui-ctl-after {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    top: 50%;
    transform: translateY(-50%);
}

.kt-ui-selector.is-single .ui-ctl-after {
    width: var(--kt-ui-selector-ctl-after-width);
}

.kt-ui-selector-dropdown-arrow {
    margin-right: 14px;
    flex-shrink: 0;
    transform-origin: 50% 50%;
    transition: transform 160ms linear;
    will-change: transform;
    color: var(--kt-ui-selector-dropdown-arrow-color);
}

.kt-ui-selector.is-open .kt-ui-selector-dropdown-arrow {
    transform: rotate(180deg);
}
/* End dropdown arrow */

.ui-tag-selector-container .ui-tag-selector-text-box {
    color: var(--ui-color-palette-black-base);
}

/* Placeholder */
.ui-tag-selector-container .ui-tag-selector-text-box::-moz-placeholder {
    font-family: var(--kt-ui-selector-placeholder-ff);
    font-size: var(--kt-ui-selector-placeholder-font-size);
    line-height: var(--kt-ui-selector-placeholder-line-height);
    color: var(--kt-ui-selector-placeholder-color);
}
.kt-ui-selector-placeholder,
.ui-tag-selector-container .ui-tag-selector-text-box::placeholder {
    font-family: var(--kt-ui-selector-placeholder-ff);
    font-size: var(--kt-ui-selector-placeholder-font-size);
    line-height: var(--kt-ui-selector-placeholder-line-height);
    color: var(--kt-ui-selector-placeholder-color);
}

.kt-ui-selector-placeholder {
    max-width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
}

.kt-ui-selector .ui-tag-selector-text-box {
    width: auto;
    padding: 0;
    flex-grow: 1;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    background-color: inherit;
}
/* End placeholder */

/* Input value Container */
.kt-ui-selector__value-container {
    display: none;
}
/* End input value Container */

.kt-ui-selector .ui-tag-selector-outer-container {
    border: none;
    padding: 0;
    background-color: inherit;
    transition: inherit;
}

.kt-ui-selector .ui-tag-selector-container {
    min-height: calc(var(--ui-field-size) - 2 * var(--kt-ui-field-border-width));
    align-items: center;
    overflow-y: hidden;
}

/* Create button */
.ui-tag-selector-container .ui-tag-selector-add-button-caption,
.ui-tag-selector-container .ui-tag-selector-create-button-caption {
    color: var(--ui-link-color);
    border: none;
}

.ui-tag-selector-container .ui-tag-selector-add-button-caption:hover,
.ui-tag-selector-container .ui-tag-selector-create-button-caption:hover {
    color: var(--ui-link-color-hover);
}

.ui-tag-selector-container .ui-tag-selector-add-button-caption::before,
.ui-tag-selector-container .ui-tag-selector-create-button-caption::before {
    background: currentColor;
    -webkit-mask: var(--kt-ui-btn-icon-plus) no-repeat 50% 50%;
            mask: var(--kt-ui-btn-icon-plus) no-repeat 50% 50%;
    -webkit-mask-size: 24px;
            mask-size: 24px;
}
/* End create button */

/* Selected item */
.ui-tag-selector-container .ui-tag-selector-item {
    margin: var(--kt-ui-selector-item-offset);
}

.ui-tag-selector-container .ui-tag-selector-tag {
    cursor: default;
}
/* End selected item */

/* Single selected item */
.kt-ui-selector.is-single .ui-tag-selector-item {
    height: auto;
}

.kt-ui-selector.is-single .ui-tag-selector-tag {
    font-family: var(--kt-ui-selector-single-item-ff);
    font-size: var(--kt-ui-selector-single-item-font-size);
    font-weight: var(--kt-ui-selector-single-item-font-weight);
    line-height: var(--kt-ui-selector-single-item-line-height);
}

.kt-ui-selector.is-single .ui-tag-selector-tag,
.kt-ui-selector.is-single .ui-tag-selector-tag:hover {
    color: var(--kt-ui-selector-single-item-color) !important;
    background-color: var(--kt-ui-selector-single-item-bg-color);
}

.kt-ui-selector.is-single .ui-tag-selector-tag-avatar,
.kt-ui-selector.is-single .ui-tag-selector-tag-remove {
    display: none;
}

.kt-ui-selector.is-single .ui-tag-selector-tag-title {
    margin-left: 0;
}
/* End single selected item */

/* Multiple selected item */
.ui-tag-selector-container.is-multiple .ui-tag-selector-item {
    height: var(--kt-ui-selector-multiple-item-height);
}

.ui-tag-selector-container.is-multiple .ui-tag-selector-tag {
    font-family: var(--kt-ui-selector-multiple-item-font-ff);
    font-size: var(--kt-ui-selector-multiple-item-font-size);
    line-height: var(--kt-ui-selector-multiple-item-line-height);
    border-radius: var(--kt-ui-selector-multiple-item-border-radius);
    color: var(--kt-ui-selector-multiple-item-color) !important;
    background-color: var(--kt-ui-selector-multiple-item-bg-color);
}

.ui-tag-selector-container.is-multiple .ui-tag-selector-tag:hover {
    color: var(--kt-ui-selector-multiple-item-color-hover) !important;
    background-color: var(--kt-ui-selector-multiple-item-bg-color-hover);
}

.ui-tag-selector-container.is-multiple .ui-tag-selector-tag-title {
    max-width: 12ch;
    font-weight: var(--kt-ui-selector-multiple-item-font-weight);
}

@container kt-ui-selector (min-width: 600px) {
    .ui-tag-selector-container.is-multiple .ui-tag-selector-tag-title {
        max-width: initial;
    }
}
/* End multiple selected item */

/* Item remove button */
.ui-tag-selector-container.is-multiple .ui-tag-selector-tag-remove {
    min-width: var(--kt-ui-selector-item-remove-btn-size);
    margin-left: var(--kt-ui-selector-item-remove-btn-offset);
    opacity: var(--kt-ui-selector-item-remove-btn-opacity);
}

.ui-tag-selector-container.is-multiple .ui-tag-selector-tag-remove:hover {
    opacity: var(--kt-ui-selector-item-remove-btn-opacity-hover);
}
/* End item remove button */

/* Dropdown */
.kt-ui-selector-popup {
    box-shadow: var(--kt-ui-selector-dropdown-box-shadow);
    border-radius: var(--kt-ui-selector-dropdown-border-radius);
    background-color: var(--kt-ui-selector-dropdown-bg-color);
}

.kt-ui-selector-dropdown {
    max-height: calc(
        var(--kt-ui-selector-option-min-height) * var(--kt-ui-selector-option-count)
        + var(--kt-ui-selector-option-offset) * (var(--kt-ui-selector-option-count) - 1)
        + var(--kt-ui-selector-dropdown-padding) * 2
    );
}

.kt-ui-selector-dropdown .ui-selector-tab-content {
    margin: 0;
}

.kt-ui-selector-dropdown .ui-selector-items {
    padding: var(--kt-ui-selector-dropdown-padding);
}
/* End dropdown */

/* Option */
.ui-selector-dialog .ui-selector-item-box {
    height: var(--kt-ui-selector-option-min-height);
}

.ui-selector-dialog .ui-selector-item-box + .ui-selector-item-box {
    margin-top: var(--kt-ui-selector-option-offset);
}

.ui-selector-dialog .ui-selector-item-box.ui-selector-item-box-has-children {
    height: auto;
}

.ui-selector-dialog .ui-selector-item {
    box-sizing: border-box;
    min-height: var(--kt-ui-selector-option-min-height);
    font-family: var(--kt-ui-selector-option-ff);
    font-size: var(--kt-ui-selector-option-font-size);
    font-weight: var(--kt-ui-selector-option-font-weight);
    line-height: var(--kt-ui-selector-option-line-height);
    border-radius: var(--kt-ui-selector-option-border-radius);
    background-color: var(--kt-ui-selector-option-bg-color);
}

.ui-selector-dialog .ui-selector-item-title {
    color: var(--kt-ui-selector-option-color);
}

.ui-selector-dialog .ui-selector-item-box-selected > .ui-selector-item {
    background-color: var(--kt-ui-selector-option-selected-bg-color);
}

.ui-selector-dialog .ui-selector-item-box-selected > .ui-selector-item .ui-selector-item-title {
    color: var(--kt-ui-selector-option-selected-color);
}

.ui-selector-dialog .ui-selector-item-box-focused > .ui-selector-item {
    background-color: var(--kt-ui-selector-option-bg-color-hover);
}

.ui-selector-dialog .ui-selector-item-box-focused > .ui-selector-item .ui-selector-item-title {
    color: var(--kt-ui-selector-option-color-hover);
}
/* End option */

.ui-selector-item-avatar {
    background-size: cover;
}

/* Stub "No search data" */
.ui-selector-tab-content.ui-selector-tab-content-active {
    min-height: 200px;
}
/* End stub "No search data" */

@container (min-width: 420px) {
    .ui-tag-selector-container .ui-tag-selector-add-button-caption,
    .ui-tag-selector-container .ui-tag-selector-create-button-caption {
        font-size: 14px;
    }

    .ui-tag-selector-container .ui-tag-selector-add-button-caption::before,
    .ui-tag-selector-container .ui-tag-selector-create-button-caption::before {
        -webkit-mask-size: 20px;
                mask-size: 20px;
    }
}