@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;

@mixin msk-footer {
    @include m.msk-reset-box-sizing('.msk-footer');

    .msk-footer {
        @include m.msk-focus;

        background-color: tk.$msk--color-bg-footer;
        box-sizing: border-box;
        color: tk.$msk--color-content-footer;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 3rem;
    }

    .msk-footer-container {
        border-bottom: m.msk-rem(1px) solid;
        display: flex;
        flex-wrap: wrap;
        margin: 0;
        width: 100%;

        &:first-child {
            border-top: m.msk-rem(4px) solid
                tk.$msk--color-border-footer-divider;
        }

        &:last-child {
            border-bottom: 0;
        }

        & > .msk-footer-section {
            margin-left: auto;
            margin-right: auto;
            max-width: 1440px;
            padding-left: 0.5rem;
            padding-right: 0.5rem;
            width: 100%;

            @media (min-width: 1025px) {
                padding-left: 3rem;
                padding-right: 3rem;
            }
        }
    }

    .msk-footer-container-2400 {
        & > .msk-footer-section {
            @include m.msk-container-2400;
        }
    }

    .msk-footer-container-fluid {
        & > .msk-footer-section {
            @include m.msk-container-fluid;
        }
    }

    .msk-footer-contact-nav {
        padding: m.msk-rem(8px);
    }

    .msk-footer-base {
        display: block;

        .msk-footer-base-group {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            @media (min-width: 1025px) {
                flex-direction: row;
            }
        }

        .msk-footer-logo-container {
            padding: 0 m.msk-rem(8px);

            @media (min-width: 801px) {
                width: v.$msk--6-of-12;
            }

            @media (min-width: 1025px) {
                width: v.$msk--6-of-12;
            }

            .msk-footer-logo {
                margin-top: m.msk-rem(24px);
            }
        }

        .msk-footer-base-link-group {
            display: flex;
            flex-flow: column nowrap;
            margin-top: m.msk-rem(24px);
            padding: 0 m.msk-rem(8px);

            @media (min-width: 801px) {
                flex-direction: row;
            }

            .msk-footer-base-link {
                list-style-type: none;
                margin-right: m.msk-rem(16px);

                &:last-child {
                    margin-right: 0;
                }

                .msk-link {
                    @media (min-width: 801px) {
                        white-space: nowrap;
                    }
                }
            }
        }

        .msk-footer-copyright {
            font-size: v.$msk--size-1;
            padding: m.msk-rem(24px) m.msk-rem(8px) m.msk-rem(32px);
            width: 100%;
        }
    }

    .msk-footer-sitemap {
        display: flex;
        flex-wrap: wrap;
        margin: m.msk-rem(16px) auto;

        .msk-footer-sitemap-section {
            flex: 0 1 auto;
            margin: m.msk-rem(16px) 0;
            width: 100%;

            @media (min-width: 801px) {
                width: v.$msk--6-of-12;
            }

            @media (min-width: 1025px) {
                width: v.$msk--3-of-12;
            }

            .msk-footer-sitemap-section-container {
                padding: m.msk-rem(8px);

                .msk-footer-sitemap-link-group {
                    margin-bottom: m.msk-rem(16px);
                    padding: 0;

                    &:last-child {
                        margin-bottom: 0;
                    }

                    .msk-footer-sitemap-link {
                        list-style-type: none;
                    }
                }

                .msk-footer-sitemap-header {
                    color: c.$msk--blue-80;
                    margin-bottom: m.msk-rem(16px);
                }
            }
        }
    }

    .msk-footer-btn-ghost {
        @include m.msk-edge-btn-default;
        @include m.msk-edge-btn-ghost;

        justify-content: flex-start;
    }

    .msk-footer-btn-group {
        display: flex;
        flex-direction: column;
        padding: 0 m.msk-rem(8px);

        @media (min-width: 801px) {
            flex-direction: row;
        }
    }
}

@mixin next-msk-footer {
    .msk-footer--logo {
        margin-top: 1.5rem;
        display: flex;
        height: 100%;
        width: 100%;
        aspect-ratio: 60 / 284;
        max-height: 60px;
        max-width: 284px;
        background-image: url('https://cdn.jsdelivr.net/npm/@mskcc/fundamentals@latest/dist/logo/assets/logo-primary-sans-medium-navy.svg');
    }

    // dark theme
    html[data-theme='dark'],
    .dark {
        .msk-footer--logo {
            background-image: url('https://cdn.jsdelivr.net/npm/@mskcc/fundamentals@latest/dist/logo/assets/logo-primary-sans-medium-white.svg');
        }
    }
}