@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/overflow-menu';

@mixin msk-overflow-menu {
    @include overflow-menu.overflow-menu;

    // button
    .#{$prefix}--overflow-menu,
    .#{$prefix}--overflow-menu__trigger {
        color: tk.$msk--color-content-action-secondary;

        &:hover {
            --#{$prefix}-layer-hover: #{tk.$msk--color-bg-action-hover};
            color: tk.$msk--color-content-action-secondary-hover;
        }
        &:focus {
            outline-color: tk.$msk--color-border-focus-outer;
        }
        &:active {
            background-color: tk.$msk--color-bg-action-active;
            color: tk.$msk--color-content-action-secondary-active;
            border-color: tk.$msk--color-bg-action-active;
        }
    }

    .#{$prefix}--overflow-menu-options {
        &::after {
            --#{$prefix}-layer: transparent;
        }
    }
    .#{$prefix}--overflow-menu.#{$prefix}--overflow-menu--open,
    .#{$prefix}--overflow-menu.#{$prefix}--overflow-menu--open
        .#{$prefix}--overflow-menu__trigger {
        --#{$prefix}-layer: #{tk.$msk--color-bg-action-active};
    }

    // focus state
    .#{$prefix}--overflow-menu-options__btn:focus {
        --#{$prefix}-focus: #{tk.$msk--color-border-focus-outer};
        background-color: tk.$msk--color-bg-action-hover;
        color: tk.$msk--color-content-action-hover;
    }
    .cds--overflow-menu-options:focus-visible {
        outline-color: #{tk.$msk--color-border-focus-outer};
    }

    .#{$prefix}--overflow-menu-options {
        --#{$prefix}-layer: #{tk.$msk--color-bg-action};
    }

    .#{$prefix}--overflow-menu-options__btn {
        --#{$prefix}-text-secondary: #{tk.$msk--color-content-action};

        // &:disabled {
        //     background-color: tk.$msk--color-bg-disabled;
        // }
        // &:hover {
        //   color: $text-primary;
        // }
    }
    .#{$prefix}--overflow-menu-options__option--disabled
        .#{$prefix}--overflow-menu-options__btn {
        --#{$prefix}-text-disabled: #{tk.$msk--color-content-disabled};
        cursor: not-allowed;

        &:hover,
        &:active,
        &:focus {
            // @include focus-outline('reset');

            // background-color: $layer;
        }
    }
}