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

@mixin msk-modal {
    @include modal.modal;

    .#{$prefix}--modal {
        // $msk--cool-gray-30 at 50%;
        --#{$prefix}-overlay: rgb(0 0 0 / 50%);
    }

    .#{$prefix}--modal-container {
        --#{$prefix}-layer: #{tk.$msk--color-bg};

        border-radius: m.msk-rem(8px);
        box-shadow: v.$msk--elevation-plus-12;
    }

    .#{$prefix}--modal-header__heading {
        --#{$prefix}-heading-03-font-size: #{v.$msk--size-5};
        --#{$prefix}-heading-03-line-height: 1.3;
        --#{$prefix}-heading-03-letter-spacing: -0.03rem;
        --#{$prefix}-text-primary: #{tk.$msk--color-content-primary};
    }

    // -----------------------------
    // Modal content
    // -----------------------------
    .#{$prefix}--modal-content {
        --#{$prefix}-text-primary: #{tk.$msk--color-content-primary};
    }

    // -----------------------------
    // Modal footer
    // -----------------------------
    .#{$prefix}--modal-footer {
        height: unset;
        justify-content: flex-start;
        padding: 0 1rem 1rem;

        .#{$prefix}--btn {
            flex: 0;
            height: unset;
            padding: m.msk-rem(12px) m.msk-rem(16px);

            &:not(:first-child) {
                margin-left: m.msk-rem(8px);
            }
        }
    }

    // -----------------------------
    // Modal close btn
    // -----------------------------
    .#{$prefix}--modal-close {
        @include m.msk-edge-btn-ghost;
        border-top-right-radius: m.msk-rem(8px);

        // &:hover {
        //   background-color: $layer-hover;
        // }

        &:focus {
            --#{$prefix}-focus: #{tk.$msk--color-border-focus-outer};
        }
    }

    .#{$prefix}--modal-close__icon {
        --#{$prefix}-icon-primary: #{tk.$msk--color-content-primary};
    }
}