@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/fundamentals/src/_colors.scss' as c;

@mixin msk-login {
    // parent
    .msk-login--container {
        @media (min-width: 768px) {
            background-color: tk.$msk--color-bg-layer;
        }

        .msk-world {
            display: flex;
            align-items: center;
        }
    }

    .msk-login {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-inline: auto;

        @media (min-width: 768px) {
            max-width: 420px;
        }

        .msk-tile.msk-tile-ghost.msk-login--tile {
            background-color: tk.$msk--color-bg;
            border-radius: 0;
            @media (min-width: 768px) {
                box-shadow: v.$msk--elevation-plus-03;
                border-radius: m.msk-rem(8px);
            }
        }

        .msk-login--divider {
            position: relative;
            margin-block: m.msk-rem(24px);
            margin-inline: m.msk-rem(24px);

            &::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 0;
                right: 0;
                height: 1px;
                background-color: tk.$msk--color-border;
                transform: translateY(-50%);
            }

            &::after {
                content: 'or';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background-color: tk.$msk--color-bg;
                padding-inline: m.msk-rem(24px);
            }

            &.msk-login--divider--no-text {
                &::after {
                    content: '';
                }
            }
        }

        .msk-login--content {
            display: grid;
            & > .msk-login--section {
                margin-block-start: m.msk-rem(24px);
            }
        }

        &.msk-login--two-column-layout {
            @media (min-width: 768px) {
                max-width: 768px;
            }
            .msk-login--content > .msk-login--section {
                margin-block-start: 0;
            }

            .msk-login--content {
                margin-block-start: m.msk-rem(24px);

                @media (min-width: 768px) {
                    grid-template-columns: 1fr auto 1fr;
                }

                .msk-login--fieldset:first-child {
                    margin-top: 0;
                }

                .msk-login--divider {
                    height: 1rem;
                    position: relative;

                    @media (min-width: 768px) {
                        height: 100%;
                        width: 1rem;
                        margin-block-start: 0;
                        margin-inline: 0;

                        &::before {
                            top: 0;
                            bottom: m.msk-rem(24px);
                            left: 50%;
                            transform: translate(-50%, 0);
                            width: 1px;
                            height: unset;
                        }
                        &::after {
                            padding-block: m.msk-rem(24px);
                            padding-inline: 0;
                        }
                    }
                }
            }
        }
    }

    .msk-login--outer-wrapper {
        padding-top: m.msk-rem(16px);
    }

    .msk-login--product {
        padding-block-start: m.msk-rem(24px);
    }

    // inner wrapper
    .msk-login--logo-container {
        padding-inline: m.msk-rem(24px);
        padding-block-end: m.msk-rem(16px);
    }

    // logo
    .msk-login--logo {
        display: flex;
        max-height: 48px;
        max-width: 227.2px;
        aspect-ratio: 227.2 / 48;
        background-size: contain;
        background-image: url('https://cdn.jsdelivr.net/npm/@mskcc/fundamentals@latest/dist/logo/assets/logo-primary-sans-medium-navy.svg');
    }

    // logo for dark theme
    .msk-theme--dark .msk-login--logo {
        background-image: url('https://cdn.jsdelivr.net/npm/@mskcc/fundamentals@latest/dist/logo/assets/logo-primary-sans-medium-white.svg');
    }

    @media (prefers-color-scheme: dark) {
        .msk-login--logo {
            background-image: url('https://cdn.jsdelivr.net/npm/@mskcc/fundamentals@latest/dist/logo/assets/logo-primary-sans-medium-white.svg');
        }
    }

    // Banner
    .msk-login--banner {
        margin-block-start: m.msk-rem(24px);
        font-size: v.$msk--btn-font-size;
        font-weight: v.$msk--btn-font-weight;
        padding-inline: m.msk-rem(24px);
        padding-block: m.msk-rem(8px);
        color: tk.$msk--color-content-tag-cool-gray;
        background-color: tk.$msk--color-bg-tag-cool-gray;

        &.msk-login--banner--internal {
            color: tk.$msk--color-content-tag-blue;
            background-color: tk.$msk--color-bg-tag-blue;
        }
        &.msk-login--banner--external {
            color: tk.$msk--color-content-tag-cyan;
            background-color: tk.$msk--color-bg-tag-cyan;
        }
    }

    // Error Section
    .msk-login--error {
        margin-block-start: m.msk-rem(24px);
        background-color: tk.$msk--color-bg-feedback-error-weak;
        padding: m.msk-rem(24px);

        .msk-login--error-title {
            @include m.msk-heading(h6);
            color: tk.$msk--color-content-feedback-error;
        }
        .msk-login--error-content {
            color: tk.$msk--color-content-feedback-error-strong;
        }
    }

    .msk-login--section,
    .msk-login--product {
        padding-inline: m.msk-rem(24px);
    }

    .msk-login--section .msk-login--section--full {
        padding-inline: 0;
    }

    .msk-login--fieldset {
        padding-block-end: m.msk-rem(24px);
        padding-inline: m.msk-rem(24px);

        & > * + * + * {
            margin-top: m.msk-rem(24px);
        }
    }

    .msk-btn-set.msk-btn-set--full.msk-login--button-set {
        margin-bottom: m.msk-rem(24px);
        align-items: center;

        > .#{$prefix}--btn,
        > .msk-btn {
            flex: 1;
            justify-content: center;
            width: 100%;
            max-width: unset;
        }

        & > * + button {
            margin-top: m.msk-rem(16px);
        }
        & > * + :not(button) {
            margin-top: m.msk-rem(10px);
        }
    }

    // footer
    .msk-login--footer {
        font-size: v.$msk--size-1;
        text-align: center;
        margin-top: m.msk-rem(24px);
        color: tk.$msk--color-content-secondary;
    }
}