@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/list-box';
@use '@carbon/styles/scss/components/search';

@mixin msk-autocomplete {
    .msk-autocomplete {
        $msk--listbox-row-height: m.msk-rem(42px);

        @include list-box.list-box;
        @include search.search;

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

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

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

            &: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;
        }

        // each item
        .#{$prefix}--list-box__menu-item {
            --#{$prefix}-text-secondary: #{c.$msk--cool-gray-100};
            --#{$prefix}-body-compact-01-font-size: #{v.$msk--size-2};
            --#{$prefix}-body-compact-01-line-height: 1.5;

            border-radius: 0;
            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);
            }

            &.#{$prefix}--list-box__menu-item--highlighted {
                --#{$prefix}-focus: #{c.$msk--black-100};
                --#{$prefix}-layer-hover: #{c.$msk--cool-gray-10};
                --#{$prefix}-text-primary: #{c.$msk--blue-80};

                background-color: c.$msk--cool-gray-10;
                box-shadow: inset 0 0 0 m.msk-rem(4px) c.$msk--white-0;
            }
        }

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

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

            &:focus,
            &:hover {
                background-color: c.$msk--cool-gray-10;
                color: c.$msk--blue-80;
            }

            &:active {
                background-color: c.$msk--cool-gray-20;
                color: c.$msk--blue-90;
            }
        }
    }
}