@use '@mskcc/themes/tokens' as tk;
@use '@carbon/styles/scss/config' as *;
@use '@mskcc/fundamentals/src/_variables.scss' as v;
@use '@mskcc/fundamentals/src/_mixins.scss' as m;
@use '@mskcc/colors' as c;
@use '@carbon/styles/scss/components/multiselect';

@mixin msk-multiselect {
    @include multiselect.multiselect;

    .#{$prefix}--multi-select--selected {
        .#{$prefix}--list-box__field--wrapper {
            .#{$prefix}--tag:first-child {
                margin: 0 0.5rem;
            }
        }
    }
    // set overflow
    .#{$prefix}--multi-select .#{$prefix}--list-box__field--wrapper {
        margin-bottom: 1px;
        overflow-x: auto;
        overflow-y: hidden;
        padding-right: 6rem;
        block-size: 100%;
        border-radius: m.msk-rem(4px);
    }
    .#{$prefix}--list-box__menu {
        --#{$prefix}-layer: #{tk.$msk--color-bg};
        transform: translateY(m.msk-rem(1px));
    }

    .#{$prefix}--multi-select__wrapper {
        $msk--listbox-row-height: m.msk-rem(42px);
        .#{$prefix}--multi-select {
            --#{$prefix}-support-error: #{tk.$msk--color-content-error};

            .#{$prefix}--list-box__invalid-icon {
                visibility: hidden;
            }
        }

        // container wrapper
        .#{$prefix}--multi-select--filterable--input-focused,
        .#{$prefix}--multi-select
            .#{$prefix}--list-box__field--wrapper--input-focused {
            --#{$prefix}-focus: transparent;
        }

        // input
        .#{$prefix}--text-input {
            padding-left: 0;
        }

        .#{$prefix}--list-box {
            --#{$prefix}-border-strong: transparent;
            --#{$prefix}-field: transparent;

            background-color: tk.$msk--color-bg-input;
            border: 1px solid tk.$msk--color-border-input;
            border-radius: m.msk-rem(4px);
            color: tk.$msk--color-content-input-primary;
            font-size: v.$msk--size-2;
            transition-duration: 110ms;
            transition-property: box-shadow, outline;
            transition-timing-function: ease-in-out;

            &:hover {
                --#{$prefix}-field-hover: transparent;

                cursor: default;
            }
        }

        .#{$prefix}--list-box__label {
            --#{$prefix}-text-primary: #{tk.$msk--color-content-input-primary};
        }

        .#{$prefix}--list-box--expanded {
            --#{$prefix}-border-subtle-01: transparent;
            --#{$prefix}-field: transparent;
            --#{$prefix}-layer: #{tk.$msk--color-bg-action};

            border: 1px solid tk.$msk--color-border-focus-outer;
            box-shadow: 0 0 0 m.msk-rem(1px) tk.$msk--color-border-focus-outer;

            &:hover {
                --#{$prefix}-field: transparent;
            }
        }

        // container
        .#{$prefix}--list-box--expanded .#{$prefix}--list-box__menu {
            border-radius: m.msk-rem(4px);
            box-shadow: v.$msk--elevation-plus-06;

            &:focus {
                --#{$prefix}-focus: transparent;
            }
        }

        // each item

        // Descendant of a `list-box__menu` that represents a selection for a control
        .#{$prefix}--list-box__menu-item {
            --#{$prefix}-text-secondary: #{tk.$msk--color-content-action};
            --#{$prefix}-body-compact-01-font-size: #{v.$msk--size-2};
            --#{$prefix}-body-compact-01-line-height: 1.5;

            height: $msk--listbox-row-height;

            &:first-child {
                border-top-left-radius: m.msk-rem(4px);
                border-top-right-radius: m.msk-rem(4px);
            }

            &:last-child {
                border-bottom-left-radius: m.msk-rem(4px);
                border-bottom-right-radius: m.msk-rem(4px);
            }
        }

        //disabled
        .#{$prefix}--list-box__menu-item[disabled],
        .#{$prefix}--list-box__menu-item[disabled] *,
        .#{$prefix}--list-box__menu-item[disabled]
            .#{$prefix}--list-box__menu-item__option,
        .#{$prefix}--list-box__menu-item[disabled]:hover {
            --#{$prefix}-text-disabled: #{tk.$msk--color-content-disabled};

            background-color: tk.$msk--color-bg-disabled;
        }

        .#{$prefix}--list-box__menu-item__option {
            --#{$prefix}-border-subtle-01: transparent;
            --text-secondary: #{c.$msk--cool-gray-100};

            height: $msk--listbox-row-height;
            margin: 0;
            padding: m.msk-rem(12px) m.msk-rem(16px);
        }

        // expand btn inline
        // #{$prefix}--list-box__field msk-multiselect--expand-btn msk-multiselect--selected
        .#{$prefix}--list-box__field.msk-multiselect--selected {
            block-size: 100%;
        }

        // tag
        .#{$prefix}--tag {
            border-radius: m.msk-rem(4px);
            border-style: solid;
            border-width: 1px;

            .#{$prefix}--tag__label {
                padding-inline-end: m.msk-rem(4px);
            }
        }

        .#{$prefix}--tag--high-contrast {
            --#{$prefix}-background-inverse: #{tk.$msk--color-bg-tag-cool-gray};
            --#{$prefix}-text-inverse: #{tk.$msk--color-content-tag-cool-gray};

            border-color: tk.$msk--color-border-tag-cool-gray;

            .#{$prefix}--tag__close-icon {
                border-radius: 0 4px 4px 0;

                &:hover {
                    --#{$prefix}-background-inverse-hover: #{tk.$msk--color-bg-tag-gray-hover};
                }
            }
        }

        // expand button
        .msk-multiselect--expand-btn-icon-wrapper {
            align-items: center;
            background-color: tk.$msk--color-bg-input;
            border-bottom-right-radius: m.msk-rem(4px);
            border-top-right-radius: m.msk-rem(4px);
            bottom: 0;
            display: flex;
            justify-content: center;
            position: absolute;
            right: 0;
            top: 0;
            width: m.msk-rem(40px);

            .msk-multiselect--expand-btn-icon {
                font-size: 1.5rem;
                transform: rotate(0deg);
                transition: transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9),
                    -webkit-transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
            }

            &.open {
                .msk-multiselect--expand-btn-icon {
                    transform: rotate(180deg);
                }
            }
        }

        .msk-multiselect--expand-btn {
            position: unset;
        }

        // closing icon color
        .msk-icon.msk-tag--close-icon {
            color: tk.$msk--color-content-tag-cool-gray;
        }
    }

    .msk-multiselect--clear-all-btn {
        background: linear-gradient(
            90deg,
            transparent 0%,
            tk.$msk--color-bg-input 4px
        );
        bottom: 0;
        padding-left: m.msk-rem(8px);
        position: absolute;
        right: 40px;
        top: 0;

        &:hover,
        &:focus {
            background: linear-gradient(
                90deg,
                transparent 0%,
                c.$msk--magenta-10 4px
            );
            color: c.$msk--magenta-70;
        }
    }

    // clear all button
    .msk-multiselect--clear-all-btn,
    .msk-multiselect--clear-all-btn-outside {
        align-items: center;
        border: none;
        color: tk.$msk--color-content-link;
        background-color: tk.$msk--color-bg-input;
        cursor: pointer;
        display: flex;

        &:active {
            background: linear-gradient(
                90deg,
                c.$msk--magenta-20 0%,
                c.$msk--magenta-20 4px
            );
            color: c.$msk--magenta-80;
        }
    }

    .msk-multiselect--clear-all-btn-icon {
        color: inherit;
        margin-left: m.msk-rem(8px);
    }

    // outside items
    .msk-multiselect--outside {
        .#{$prefix}--multi-select.#{$prefix}--multi-select--selected {
            .#{$prefix}--list-box__field {
                padding-left: 1rem;
            }
        }
    }

    .msk-multiselect--outside-items-wrapper {
        align-items: center;
        display: flex;
        flex-wrap: wrap;

        // tag
        .#{$prefix}--tag {
            border-radius: m.msk-rem(4px);
            border-style: solid;
            border-width: 1px;

            .#{$prefix}--tag__label {
                padding-inline-end: m.msk-rem(4px);
            }
        }

        .#{$prefix}--tag--high-contrast {
            --#{$prefix}-background-inverse: #{tk.$msk--color-bg-tag-cool-gray};
            --#{$prefix}-text-inverse: #{tk.$msk--color-content-tag-cool-gray};

            border-color: tk.$msk--color-border-tag-cool-gray;

            .#{$prefix}--tag__close-icon {
                border-radius: 0 4px 4px 0;

                &:hover {
                    --#{$prefix}-background-inverse-hover: #{tk.$msk--color-bg-tag-gray-hover};
                }
            }
        }

        .msk-multiselect--clear-all-btn-outside {
            background-color: c.$msk--white-0;
            border-radius: m.msk-rem(4px);
            padding: m.msk-rem(4px) m.msk-rem(8px);

            &:hover,
            &:focus {
                background-color: tk.$msk--color-bg-tag-gray-hover;
            }
        }

        .msk-multiselect--clear-all-btn-text {
            white-space: nowrap;
        }
    }

    // FilterableMultiSelect
    .#{$prefix}--multi-select--filterable__wrapper {
        .#{$prefix}--multi-select--filterable.#{$prefix}--combo-box
            .#{$prefix}--text-input {
            color: tk.$msk--color-content-input-primary;
            border: none;
            width: 100%;
            &::placeholder {
                color: tk.$msk--color-content-input-secondary;
            }
        }

        .#{$prefix}--list-box__field {
            padding-inline-start: 0.5rem;
            padding-inline-end: 2rem;
            block-size: 100%;
            min-height: m.msk-rem(38px);
            flex-wrap: wrap;
            gap: 0.5rem;
        }
        // clear button for input
        .msk-multi-select--filterable-input-wrapper {
            position: relative;
            padding-right: 24px;
            display: flex;
            flex: 1 1 0;

            .#{$prefix}--list-box__selection {
                right: 0;
            }
        }

        .#{$prefix}--multi-select.#{$prefix}--multi-select--selected
            .#{$prefix}--list-box__field {
            padding-inline-start: 0.5rem;
            padding-inline-end: 3rem;
            padding-block: 0.25rem;
        }
        .#{$prefix}--list-box {
            height: fit-content;
            max-block-size: unset;
            min-block-size: m.msk-rem(40px);
        }
        .#{$prefix}--multi-select .#{$prefix}--tag {
            margin: unset;
        }
        .#{$prefix}--text-input {
            inline-size: fit-content;
            padding: 0;
        }

        // expand icon
        .#{$prefix}--list-box__menu-icon {
            right: m.msk-rem(8px);
        }

        // dropdown
        .#{$prefix}--list-box__menu {
            transform: translateY(m.msk-rem(3px));
        }
    }
}