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

%kbq-select-base {
    box-sizing: border-box;

    display: inline-block;

    width: 100%;

    outline: none;

    .kbq-select__trigger {
        display: flex;
        box-sizing: border-box;
        position: relative;

        cursor: pointer;

        min-height: calc(var(--kbq-form-field-size-height) - calc(var(--kbq-size-border-width) * 2));

        &:not(.kbq-select__trigger_multiline) {
            height: calc(var(--kbq-form-field-size-height) - calc(var(--kbq-size-border-width) * 2));

            & .kbq-select__matcher {
                overflow: hidden;

                white-space: nowrap;
            }
        }
    }

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

        display: flex;
        flex-grow: 1;
        align-items: center;

        // todo
        & > span {
            flex: 1;
            overflow: hidden;
        }
    }

    .kbq-select__trigger.kbq-select__trigger_single,
    .kbq-select__trigger.kbq-select__trigger_multiple.kbq-select__trigger_empty {
        & .kbq-select__matcher {
            padding: var(--kbq-select-size-single-padding-vertical) var(--kbq-select-size-single-padding-right)
                var(--kbq-select-size-single-padding-vertical) var(--kbq-select-size-single-padding-left);
        }
    }

    .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) {
        & .kbq-select__matcher {
            padding: var(--kbq-select-size-multiple-padding-vertical) var(--kbq-select-size-multiple-padding-right)
                var(--kbq-select-size-multiple-padding-vertical) var(--kbq-select-size-multiple-padding-left);

            .kbq-select__match-container {
                display: flex;
            }

            .kbq-select__match-list {
                display: flex;
                flex-wrap: wrap;
                overflow: hidden;

                height: calc(
                    var(--kbq-form-field-size-height) - calc(var(--kbq-select-size-multiple-padding-vertical) * 2)
                );

                max-height: calc(
                    var(--kbq-form-field-size-height) - calc(var(--kbq-select-size-multiple-padding-vertical) * 2)
                );

                gap: var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));

                margin-right: var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));
            }
        }
    }

    .kbq-select__trigger.kbq-select__trigger_multiline:not(.kbq-select__trigger_empty) {
        .kbq-select__match-container {
            flex-direction: column;
        }

        & .kbq-select__matcher {
            max-width: 100%;

            padding: calc(var(--kbq-select-size-multiple-padding-vertical) - var(--kbq-size-border-width))
                var(--kbq-select-size-multiple-padding-right)
                calc(var(--kbq-select-size-multiple-padding-vertical) - var(--kbq-size-border-width))
                var(--kbq-select-size-multiple-padding-left);
        }

        & .kbq-select__cleaner,
        & .kbq-select__arrow-wrapper {
            align-self: flex-start;
            align-items: center;

            height: calc(var(--kbq-form-field-size-height) - var(--kbq-size-s));
            min-width: var(--kbq-form-field-size-addon-width);
        }

        & .kbq-select__multiline-match-list {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;

            margin-right: var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));

            gap: var(--kbq-size-xxs);
        }
    }

    .kbq-select__match-container {
        width: 100%;

        text-overflow: ellipsis;
        overflow: hidden;

        & .kbq-select__match-hidden-text {
            flex: 0 0 40px;
            align-self: center;
            padding-left: 4px;
            padding-right: var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));

            text-align: right;
        }
    }

    & kbq-select-trigger,
    & [kbq-select-trigger] {
        width: 100%;
    }

    .kbq-select__arrow-wrapper {
        display: flex;
        align-self: center;
        justify-content: center;

        min-width: var(--kbq-form-field-size-addon-width);

        // When used in a box or standard appearance form-field the arrow should be shifted up 50%.
        .kbq-form-field-appearance-fill &,
        .kbq-form-field-appearance-standard & {
            transform: translateY(-50%);
        }

        // When used in a outline form-field the arrow should be shifted up 25%.
        .kbq-form-field-appearance-outline & {
            transform: translateY(-25%);
        }
    }

    &.kbq-disabled {
        & .kbq-select__trigger {
            @include vendor-prefixes.user-select(none);

            cursor: default;
        }
    }
}

%kbq-select-panel {
    min-width: 100%; // prevents some animation twitching and test inconsistencies in IE11

    overflow: hidden;

    border-radius: var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius));

    // Override option to scale based on font-size of the trigger.
    .kbq-option {
        font-size: inherit;
    }

    .kbq-select__no-options-message {
        @include vendor-prefixes.user-select(none);

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;

        position: relative;

        margin-bottom: var(--kbq-size-3xl);
        margin-top: var(--kbq-size-3xl);

        max-width: 100%;
        height: var(--kbq-option-size-height, var(--kbq-size-3xl));

        cursor: default;
        outline: none;

        padding-left: var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));
        padding-right: var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));

        border: var(--kbq-option-size-border-width, var(--kbq-size-3xs)) solid transparent;
    }

    .kbq-select__search-container {
        padding: var(--kbq-size-xxs);
        border-bottom: {
            width: 1px;
            style: solid;
        }
    }
}

%kbq-select-content {
    max-height: var(--kbq-select-panel-size-max-height, 256px);
    padding: var(--kbq-size-xxs);
    overflow: hidden auto;
}

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

    display: flex;
    align-items: center;
    box-sizing: border-box;

    min-height: 40px;

    border-top-width: 1px;
    border-top-style: solid;

    padding: var(--kbq-size-xxs) var(--kbq-size-l);
}

@mixin item-active-area($outline) {
    position: relative;

    &:before,
    &:after {
        position: absolute;
        content: '';
        width: var(--kbq-size-xxs);
        height: calc(100% + $outline * 2); // outline size * 2
    }

    &:before {
        right: calc(100% + $outline); // outline size
    }

    &:after {
        left: calc(100% + $outline); // outline size
    }
}