@use 'sass:color';

// Breakpoints
$breakpoint: 60rem; // 960px
$breakpointMax: calc($breakpoint - 0.0625rem); // 959.9375px

$breakpointDesktop: 92.5rem; // 1480px
$breakpointDesktopMax: calc($breakpointDesktop - 0.0625rem); // 1479px

.map-carousel {
    --map-fill-color-one: var(--white);
    --map-fill-color-two: var(--white);
    --map-fill-color-three: var(--white);
    --map-fill-color-four: var(--white);
    --map-fill-color-five: var(--white);
    --map-fill-color-six: var(--white);
    --map-fill-color-seven: var(--white);
    --map-fill-color-eight: var(--white);
    --map-fill-color-nine: var(--white);

    --map-stroke-color-one: #{color.adjust($navy, $lightness: 60%)};
    --map-stroke-color-two: #{color.adjust($navy, $lightness: 60%)};
    --map-stroke-color-three: #{color.adjust($navy, $lightness: 60%)};
    --map-stroke-color-four: #{color.adjust($navy, $lightness: 60%)};


    &__item--2.glide__slide--active {
        --map-fill-color-one: #FFE4DB;
        --map-fill-color-two: #F5F4F3;
        --map-fill-color-three: #D6ECFF;
        --map-fill-color-four: #E4F2FF;
        --map-fill-color-five: #CCCCCC;
        --map-fill-color-six: #FDFAFF;
        --map-fill-color-seven: #EAF0F6;
        --map-fill-color-eight: #FFF6DB;
        --map-fill-color-nine: #D0F1FF;

        --map-stroke-color-one: #E4F2FF;
        --map-stroke-color-two: #F5F4F3;
        --map-stroke-color-three: #FDFAFF;
        --map-stroke-color-four: #D6ECFF;
    }

    // Spacing variables
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 5rem;

    // Component sizes
    --carousel-max-width-sm: 40rem;
    --carousel-max-width: 90rem;
    --counter-dot-size: 1.5rem;
    --carousel-focus-outline-offset: 0.5rem;
    --carousel-icon-wrapper: 2rem;
    --carousel-icon-size: 1rem;

    .standard-button--onDarkSecondaryHomepage {
        @media (max-width: #{$breakpointDesktopMax}) {
            --backgroundColor: transparent;
            --borderColor: var(--white);
            --textColor: var(--white);
            --iconColor: var(--white);
            --hoverBackgroundColor: var(--white);
            --hoverBorderColor: var(--white);
            --hoverTextColor: var(--purple);
            --hoverIconColor: var(--brightPurple);
        }
    }

    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-evenly;
    overflow: hidden;

    @media (max-width: #{$breakpointMax}) {
        padding-block-end: var(--spacing-xl);
        background-color: var(--blueTint);
    }

    @media (min-width: #{$breakpoint}) {
        --carousel-icon-size: 3rem;

        display: grid;
        grid-template-areas: 'leftNav carousel rightNav';
        grid-template-rows: 1fr;
        justify-content: center;
        background-color: var(--navy);
    }

    &__map-svg {
        width: 100%;
        height: 100%;
        max-width: var(--carousel-max-width);
        max-height: var(--carousel-max-width);
        z-index: 0;
        order: 1;
        grid-row: 1;

        @media (min-width: $breakpointDesktop) {
            grid-row: 1/-1;
            grid-column: 1/-1;
        }
    }

    &__title {
        @include headline1;
        font-weight: 400;
        color: var(--blueTint);
        text-align: center;
        grid-area: 1/1;
        position: relative;
        margin-block-end: 2rem;

        @media (min-width: $breakpointDesktop) {
            color: var(--navy);
        }
    }

    &__subtext {
        @include bodyXLarge;
        color: var(--blueTint);

        @media (max-width: $breakpointMax) {
            max-width: 80%;
            margin-inline: auto;
        }

        @media (min-width: $breakpointDesktop) {
            max-width: 50%;
            margin-inline: auto;
            color: var(--navy);

            .map-carousel__item--2.glide__slide--active & {
                margin-block-start: 6rem;
            }
        }
    }

    &__button {
        display: flex;
        background-color: var(--navy);
        padding: var(--spacing-sm);
        align-items: center;
        flex: 0 0 auto;
        cursor: pointer;
        transition: all 0.25s;

        svg {
            fill: var(--white);
            width: var(--carousel-icon-size);
            height: var(--carousel-icon-size);
        }

        &:focus-visible {
            outline-offset: calc(var(--carousel-focus-outline-offset) * -1);
        }

        &:hover {
            svg {
                fill: color.adjust($blueTint, $lightness: -20%);
            }
        }

        @media (min-width: #{$breakpointDesktop}) {
            height: 101%;
            width: 100%;
            max-width: 100%;
        }

        &--left {
            clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
            grid-area: leftNav-start / leftNav-end;

            @media (max-width: #{$breakpointMax}) {
                clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
            }

            @media (min-width: #{$breakpoint}) {
                padding: 2rem 4rem 2rem 5rem;
            }
        }

        &--right {
            clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
            grid-area: rightNav-start / rightNav-end;

            @media (max-width: #{$breakpointMax}) {
                clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
            }

            @media (min-width: #{$breakpoint}) {
                padding: 2rem 5rem 2rem 4rem;
            }
        }
    }

    &__map-content__cta {
        display: flex;
        justify-content: center;
        margin-block-start: 2rem;
    }

    &__inner {
        width: 100%;
        flex: 1 0 100%;
        background-color: var(--navy);

        @media (min-width: #{$breakpoint}) {
            grid-area: carousel-start / carousel-end;
            max-width: var(--carousel-max-width);
            margin-inline: auto;

            &:before {
                content: '';
                position: absolute;
                top: -2%;
                bottom: -2%;
                left: 50%;
                transform: translateX(-50%);
                max-width: calc(1059px + 12rem);
                width: 100%;
                background-color: var(--navy);
                z-index: 0;
            }
        }

        @media (max-width: #{$breakpointDesktop}) {
            margin-block-end: 1rem;
        }
    }

    // inner grid for slide content
    &__item__container {
        display: flex;
        flex-direction: column;
        padding: var(--spacing-md);
        gap: var(--spacing-md);
        width: 100%;
        margin-inline: auto;
        max-width: calc(var(--carousel-max-width-sm) - var(--spacing-md));

        @media (min-width: #{$breakpoint}) {
            display: grid;
            align-items: center;
            padding: var(--spacing-lg) var(--spacing-md);
            max-width: calc(var(--carousel-max-width) - var(--spacing-md));
        }

        @media (min-width: #{$breakpointDesktop}) {
            grid-template-rows: 0.25fr 2fr 1fr;
        }
    }

    &__items {
        .glide__slide {
            .map-carousel__text-container {
                transition: all var(--animation-speed-slow) ease-in-out;
                opacity: 0;
            }

            &--active {
                .map-carousel__text-container {
                    opacity: 1;
                }
            }
        }
    }

    &__text-container {
        @media (min-width: #{$breakpoint}) {
            grid-column: 1;
            grid-row: 2;
            z-index: 1;
            width: 100%;
        }

        @media (max-width: #{$breakpointDesktopMax}) {
            order: 2;
            grid-row: 2;
        }
    }

    &__counter {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: var(--spacing-sm);
        left: 50%;
        width: 100%;
        max-width: calc(var(--carousel-max-width) + var(--spacing-lg) * 1.5);
        margin-inline: auto;
        gap: var(--spacing-sm);
        transform: translateX(-50%);

        &__text {
            @include detail;
            color: var(--navy);
        }
    }

    &__counter__dot {
        width: var(--counter-dot-size);
        height: var(--counter-dot-size);
        background-color: color.adjust($navy, $lightness: -20%);
        border: 0.09rem solid color.adjust($blueTint, $lightness: -20%);
        border-radius: 50%;
        transition: all 0.25s;
        cursor: pointer;

        &__text {
            @include detail;
        }

        &.glide__bullet--active {
            opacity: 1;
            background-color: color.adjust($blueTint, $lightness: -20%);
            border-color: color.adjust($blueTint, $lightness: -30%);
        }

        &:focus,
        &:hover {
            background-color: color.adjust($blueTint, $lightness: -20%);
            border-color: var(--white);
        }

        &:focus-visible {
            outline-offset: var(--carousel-focus-outline-offset);
        }
    }

    .glide__button--play-pause {
        position: absolute;
        bottom: 1rem;
        right: 1rem;
        z-index: 2;
        background-color: var(--white);
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.25s;

        svg {
            fill: var(--navy);
        }
    }

    &[data-is-playing="true"] {
        svg.pause-icon {
            display: block;
        }
        svg.play-icon {
            display: none;
        }
    }

    &[data-is-playing="false"] {
        svg.play-icon {
            display: block;
        }
        svg.pause-icon {
            display: none;
        }
    }
}