@use '../core/styles/common/tokens' as *;
@use '../core/styles/common/vendor-prefixes';
@use '../core/styles/common/input';

.kbq-tag {
    @include vendor-prefixes.user-select(none);

    position: relative;

    display: inline-block;

    max-width: 100%;
    height: var(--kbq-size-xxl);

    padding: var(--kbq-tag-size-padding-vertical) var(--kbq-tag-size-padding-horizontal);

    border-radius: 4px;

    cursor: default;

    outline: none;

    box-sizing: border-box;

    & .kbq-icon.kbq-tag-remove {
        display: flex;
        align-items: center;
        justify-content: center;

        flex-shrink: 0;

        margin-right: var(--kbq-tag-size-close-button-margin-right);

        &:hover {
            cursor: pointer;
        }
    }

    &.kbq-disabled .kbq-icon.kbq-tag-remove:hover {
        cursor: default;
    }

    & .kbq-tag__text {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;

        margin: 0 var(--kbq-tag-size-content-gap-horizontal);
    }

    & .kbq-icon_left {
        margin-left: var(--kbq-tag-size-icon-margin-left);
    }

    .kbq-tag-edit-input {
        @include input.kbq-reset-input();

        min-width: var(--kbq-size-xs);
        max-width: 100%;

        &.kbq-input {
            min-height: unset !important;
            border-radius: unset !important;
            padding: unset !important;
        }
    }

    .kbq-tag-edit-submit {
        margin-right: var(--kbq-size-3xs);
    }

    &.cdk-drag-placeholder {
        opacity: var(--kbq-opacity-disabled);
    }

    &.cdk-drag-animating {
        transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);
    }
}

.kbq-tag__wrapper {
    display: flex;
    align-items: center;

    height: 100%;

    flex: 1 1 100%;
}