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

@mixin msk-code-snippet {
    @include code-snippet.code-snippet;

    $msk--code-snippet-font-color: tk.$msk--color-content-primary;
    $msk--snippet-bg-color: tk.$msk--color-bg-action-layer;

    .#{$prefix}--snippet {
        background-color: $msk--snippet-bg-color;
        color: $msk--code-snippet-font-color;
        font-family: v.$msk--monospace-font-family;
        font-size: v.$msk--size-2;
    }
    .#{$prefix}--copy-btn {
        background-color: transparent;
        svg {
            --#{$prefix}-icon-primary: #{tk.$msk--color-content-action};
        }
        &:hover {
            background-color: tk.$msk--color-bg-action-hover;
            svg {
                --#{$prefix}-icon-primary: #{tk.$msk--color-content-action-hover};
            }
        }
        &:focus {
            outline-color: tk.$msk--color-border-focus-outer;
        }
        &:active {
            background-color: tk.$msk--color-bg-action-active;
            svg {
                --#{$prefix}-icon-primary: #{tk.$msk--color-content-action-active};
            }
        }
    }

    .#{$prefix}--snippet--multi .#{$prefix}--snippet-container:focus {
        outline-color: tk.$msk--color-border-focus-outer;
    }
    // fade out
    .#{$prefix}--snippet--multi.#{$prefix}--snippet--has-right-overflow::after {
        --#{$prefix}-layer: #{tk.$msk--color-bg-action-layer};
        z-index: 1;
        inline-size: 3rem;
    }
    /* ----- inline ----- */
    .#{$prefix}--snippet--inline {
        line-height: 1;
        height: auto;
        min-height: auto;
        width: fit-content;

        .msk-btn--icon {
            display: flex;
            align-items: center;
        }
    }
    /* ----- single ----- */
    .#{$prefix}--snippet--single {
        .#{$prefix}--copy-btn {
            min-height: 40px;
            height: 40px;
        }
    }

    /* ----- multi ----- */
    .#{$prefix}--snippet--multi {
        .#{$prefix}--snippet-btn--expand {
            align-items: center;
            color: tk.$msk--color-content-action;
            background-color: transparent;
            display: inline-flex;
            font-family: v.$msk--global-font-family;
            font-size: v.$msk--size-1;
            padding: 0.5rem 1rem;
            position: absolute;

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

            .#{$prefix}--icon-chevron--down {
                --cds-icon-primary: #{tk.$msk--color-content-action};
            }
        }
    }
}