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

@mixin msk-accordion {
    @include accordion.accordion;
    .#{$prefix}--accordion {
        // border color
        --#{$prefix}-border-subtle: #{c.$msk--cool-gray-30};
        --#{$prefix}-layer-hover: #{tk.$msk--color-bg-action-hover};
        --#{$prefix}-focus: #{tk.$msk--color-border-focus-outer};

        // heading color and size
        .#{$prefix}--accordion__heading {
            --#{$prefix}-text-primary: #{tk.$msk--color-content-action};
            --#{$prefix}-icon-primary: #{tk.$msk--color-content-action};

            .#{$prefix}--accordion__title {
                @include m.msk-heading(h6);
            }
        }

        .cds--accordion__item--active {
            .cds--accordion__heading {
                background-color: tk.$msk--color-bg-action-hover;
            }
        }

        // remove default padding of content
        .#{$prefix}--accordion__content {
            @media (width >= 640px) {
                padding-right: 1rem;
            }
        }

        // max width of content
        .#{$prefix}--accordion__content {
            & > * {
                max-inline-size: v.$msk--max-width-chars;
            }
        }

        // background position for hover
        .#{$prefix}--accordion__heading:hover::before,
        .#{$prefix}--accordion__heading:focus::before {
            top: 0;
        }

        /* ----- disabled ----- */
        .#{$prefix}--accordion__heading:disabled {
            --#{$prefix}-text-disabled: #{c.$msk--warm-gray-60};
            --#{$prefix}-icon-disabled: #{c.$msk--warm-gray-50};

            background: c.$msk--warm-gray-10;
        }
    }

    .msk-accordion-item--toggle-icon-only {
        position: relative;
        .cds--accordion__heading {
            cursor: default;
            padding-inline-end: 0;
            &:hover {
                --cds-layer-hover: initial;
            }
        }

        .msk-accordion-item--expand-icon {
            @include m.msk-edge-btn-ghost();
            cursor: pointer;
            z-index: 1;
            min-block-size: m.msk-rem(40px);

            &:hover {
                border-style: solid;
            }
            .msk-icon--inherit {
                color: inherit;
            }
        }
    }
}