@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/fundamentals/src/_colors.scss' as c;
@use '@carbon/styles/scss/components/list-box';

@mixin msk-list-box {
    @include list-box.list-box;
    .#{$prefix}--list-box__menu-item {
        &:hover {
            --#{$prefix}-layer-hover: #{tk.$msk--color-bg-action-hover};
        }

        &:active {
            --#{$prefix}-layer-selected: #{tk.$msk--color-bg-action-active};
        }

        &.#{$prefix}--list-box__menu-item--active {
            --#{$prefix}-layer-selected: #{tk.$msk--color-bg-action-selected};
            --#{$prefix}-text-primary: #{tk.$msk--color-content-action-selected};
            --#{$prefix}-layer-selected-hover: #{tk.$msk--color-bg-action-selected};
            .#{$prefix}--checkbox-label {
                color: var(--#{$prefix}-text-primary);
            }

            .#{$prefix}--list-box__menu-item__option:hover {
                --#{$prefix}-text-primary: #{tk.$msk--color-content-action-selected-hover};

                --#{$prefix}-layer-hover: var(--#{$prefix}-layer-selected);
            }

            &:active {
                --#{$prefix}-text-primary: #{tk.$msk--color-content-action-selected-active};
                background-color: tk.$msk--color-bg-action-selected-active;
            }
        }

        .#{$prefix}--list-box__menu-item__option {
            &:focus {
                outline: none;
                box-shadow: inset 0 0 0 m.msk-rem(2px)
                        tk.$msk--color-border-focus-outer,
                    inset 0 0 0 m.msk-rem(3px) tk.$msk--color-border-focus-inner;
            }
        }

        &.#{$prefix}--list-box__menu-item--highlighted {
            background-color: #{tk.$msk--color-bg-action-hover};
            --#{$prefix}-focus: #{tk.$msk--color-border-focus-outer};
            &.#{$prefix}--list-box__menu-item--active {
                background-color: tk.$msk--color-bg-action-selected;
            }
        }
    }
}