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

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

    .#{$prefix}--menu {
        --#{$prefix}-layer: #{tk.$msk--color-bg};
        --#{$prefix}-text-primary: #{tk.$msk--color-content-action};
        --#{$prefix}-focus: #{c.$msk--black-100};
        --#{$prefix}-text-disabled: #{tk.$msk--color-content-disabled};

        border-radius: m.msk-rem(4px);
        box-shadow: v.$msk--elevation-plus-06;

        .msk-icon {
            color: tk.$msk--color-content-action;
        }
    }

    //----------------------------------------------
    //  Groups
    // ---------------------------------------------
    .#{$prefix}--menu-item-radio-group,
    .#{$prefix}--menu-item-group {
        list-style: none;
    }

    .msk-menu-item--radio-group-list,
    .msk-menu-item--group-list {
        padding: 0;
    }

    //----------------------------------------------
    // Row Items
    // ---------------------------------------------
    .#{$prefix}--menu-item {
        --#{$prefix}-layer-hover: #{tk.$msk--color-bg-action-hover};
        --#{$prefix}-text-secondary: #{tk.$msk--color-content-action};

        &:focus {
            // background-color: var(--#{$prefix}-layer-hover);
            box-shadow: inset 0 0 0 m.msk-rem(4px) c.$msk--white-0;
        }
    }

    // danger row
    .#{$prefix}--menu-item--danger,
    .#{$prefix}--menu-item--danger {
        &:focus,
        &:hover {
            --cds-button-danger-primary: #{c.$msk--red-80};
        }
    }

    // MenuItemDivider
    .#{$prefix}--menu-item-divider {
        --cds-border-subtle: #{tk.$msk--color-border};
    }

    // Control button
    .msk-menu-button-container {
        height: 100%;
        white-space: nowrap;

        .msk-menu-button {
            &.#{$prefix}--btn--ghost {
                --#{$prefix}-layer-hover: #{c.$msk--cool-gray-10};
                --#{$prefix}-background-active: #{c.$msk--cool-gray-20};
            }

            align-items: center;
            color: c.$msk--cool-gray-90;
            height: 100%;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;

            &::after {
                background-color: transparent;
                border-radius: m.msk-rem(4px) m.msk-rem(4px) 0 0;
                bottom: 0;
                content: '';
                height: m.msk-rem(4px);
                left: 0;
                position: absolute;
                right: 0;
                transition: inherit;
            }

            .msk-menu-button-expand {
                bottom: m.msk-rem(-4px);
                position: absolute;
                right: m.msk-rem(-4px);
            }

            .msk-menu-button-expand-icon {
                transform: rotate(0deg);
                transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9),
                    -webkit-transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
            }

            .msk-menu-button-label-container {
                align-items: center;
                display: flex;
                flex-direction: column;
            }

            .msk-menu-button-label {
                padding-top: 0.5rem;
            }

            .msk-menu-button-content {
                position: relative;
            }

            .msk-menu-button-top-icon {
                &.sm {
                    font-size: m.msk-rem(16px);
                }

                &.md {
                    font-size: m.msk-rem(20px);
                }

                &.lg {
                    font-size: m.msk-rem(24px);
                }
            }

            &.active {
                background-color: c.$msk--cool-gray-10;
                color: c.$msk--blue-80;

                &::after {
                    background-color: c.$msk--blue-80;
                }

                &:hover {
                    color: c.$msk--blue-80;
                }

                .msk-menu-button-expand-icon {
                    color: c.$msk--blue-80;
                    transform: rotate(180deg);
                }

                .msk-menu-button-top-icon {
                    color: c.$msk--blue-80;
                }
            }

            @media (width <= 767px) {
                .msk-menu-button-label,
                .msk-menu-button-top-icon,
                .msk-menu-button-expand-icon {
                    display: none;
                }
            }

            // Mobile icon

            .msk-menu-button-mobile-icon {
                color: c.$msk--blue-80;
                display: block;
                height: m.msk-rem(24px);
                position: relative;
                width: m.msk-rem(24px);

                &::before {
                    content: 'menu';
                    font-family: msk-icon;
                    font-size: m.msk-rem(24px);
                    left: 50%;
                    top: 0;
                    transform: translateX(-50%);
                }

                &::after {
                    bottom: 0;
                    content: 'MENU';
                    font-size: m.msk-rem(6px);
                    font-weight: 500;
                    left: 50%;
                    position: absolute;
                    transform: translate(-50%, 100%);
                }

                &.open {
                    &::before {
                        content: 'clear';
                    }
                }
            }

            @media (width >= 768px) {
                .msk-menu-button-mobile-icon {
                    display: none;
                }

                .msk-menu-button-content {
                    padding-right: 1.5rem;
                }
            }
        }

        &.msk-menu-button--overflow {
            @media (width >= 768px) {
                .msk-menu-button-content {
                    padding-right: 0;
                }
            }
        }
    }

    // menu header
    .msk-menu--item-header {
        list-style: none;
        padding: m.msk-rem(8px) m.msk-rem(16px);
    }
}