.goal-selector {
    position: relative;
    color: $color-white;
    padding: 48px 0;

    &__section {
        @media (min-width: $break-large) {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            max-width: 1640px;
            margin: 0 auto;
        }
    }

    button {
        background-color: transparent;
        border: none;
        color: $color-white;
        padding: 0;
    }

    .toggle-subfilters {
        width: 100%;
        display: flex;
        border-radius: 8px;
        border: 1px solid white;
        overflow: hidden;
        align-items: center;
        height: 100%;
        transition: all .3s ease;

        &.active {
            border-radius: 8px 8px 0 0;
            background-color: $color-blue-light;

            & + div.form__item {
                border-radius: 0 0 8px 8px;

                @media (min-width: $break-large) {
                    border-radius: 8px;
                }
    
            }

            span.icon-wrapper {
                background-color: $color-blue-light;
            }

            .btn-title {
                color: $color-black;
            }

            .close-icon:after {
                rotate: 135deg;
                background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.94664 6.95452L6.94664 0L10.0533 0.0133004V6.94122L17 6.95452C17.0001 6.96801 17 10.0587 17 10.0455L10.0533 10.0588L10.0533 16.9867L6.94664 17L6.94664 10.0455L0 10.0588C9.23531e-05 10.0722 0 6.95452 0 6.94122L6.94664 6.95452Z' fill='#{str-replace(#{$color-black}, '#', '%23')}'/%3E%3C/svg%3E");
            }
        }

        @media (min-width: $break-large) {
            &[aria-selected="true"] {
                background-color: $color-blue-light;
                color: $color-black;

                .close-icon:after {
                    rotate: 67deg;
                    opacity: 0;
                }
            }
        }
    }

    span.icon-wrapper {
        width: 75px;
        height: 100%;
        background-color: $color-white;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 12px 20px;
        transition: all .3s ease;

        img {
            min-width: 35px;
        }

        @media (min-width: $break-large) {
            padding: 20px 30px 22px;
            width: 115px;

            img {
                min-width: 54px;
            }
        }
    }

    span.btn-title {
        padding: 0 16px;
        text-align: left;
        font-family: $font-acumen-cond;
        font-weight: 800;
        @include fontsize(16px);
        line-height: 1.3;

        @media (min-width: $break-large) {
            @include fontsize(20px);
            line-height: 1.25;
            padding: 0 24px;
        }
    }

    span.close-icon {
        width: 17px;
        height: 17px;
        margin: 0 20px 0 auto;
        position: relative;
        &:after {
            content: '';
            position: absolute;
            width: 17px;
            height: 17px;
            background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.94664 6.95452L6.94664 0L10.0533 0.0133004V6.94122L17 6.95452C17.0001 6.96801 17 10.0587 17 10.0455L10.0533 10.0588L10.0533 16.9867L6.94664 17L6.94664 10.0455L0 10.0588C9.23531e-05 10.0722 0 6.95452 0 6.94122L6.94664 6.95452Z' fill='white'/%3E%3C/svg%3E");
            transition: all .3s ease;
        }

        @media (min-width: $break-large) {
            margin-left: 0;
        }
    }

    &:before {
        content: '';
        position: absolute;
        width: 100vw;
        height: 100%;
        top: 0;
        left: -16px;
        background-image: url("/assets/img/mcw-sm.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-color: $color-blue-dark;
        z-index: -1;
        transition: all .3s ease;

        @media (min-width: $break-medium) {
            left: -50px;
            background-image: url("/assets/img/mcw-md.jpg");
        }

        @media (min-width: $break-large) {
            left: -80px;
            background-image: url("/assets/img/mcw-lg.jpg");
        }
    }

    &__header {
        h2 {
            margin: 0 0 6px;
            text-align: center;
        }

        span {
            display: block;
            font-family: $font-handwriting;
            text-align: center;
            font-weight: 400;
            @include fontsize(18px);
            line-height: .9;

            @media (min-width: $break-medium) {
                @include fontsize(28px);
            }

            @media (min-width: $break-large) {
                @include fontsize(36px);
            }
        }
    }

    &__toggle {
        border: 2px solid $color-blue-light;
        border-radius: 8px;
        margin: 40px auto;
        padding: 20px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        max-width: 484px;

        button {
            @include fontsize(14px);
            font-family: $font-acumen-cond;
            font-weight: 800;
            line-height: 1;

            &[aria-current="false"] {
                opacity: .5;
            }

            @media (min-width: $break-medium) {
                @include fontsize(20px);
            }

            @media (min-width: $break-large) {
                @include fontsize(24px);
                line-height: 1.3;
            }
        }

        @media (min-width: $break-large) {
            margin: 60px auto;
        }

        .toggle-slider {
            width: 100px;
            height: 4px;
            background-color: $color-blue-light;
            position: relative;
            border-radius: 8px;
            margin-top: 5px;
            cursor: pointer;

            @media (min-width: $break-medium) {
                height: 6px;
            }

            &:before {
                content: '';
                position: absolute;
                left: -2px;
                bottom: calc(50% - 7px);
                width: 10px;
                height: 10px;
                border: 2px solid $color-blue-light;
                border-radius: 50%;
                background-color: $color-blue-dark;
                z-index: 1;
                transition: all .3s ease;

                @media (min-width: $break-medium) {
                    width: 15px;
                    height: 15px;
                    bottom: calc(50% - 10px);
                }

                @media (min-width: $break-large) {
                    width: 18px;
                    height: 18px;
                    border: 3px solid $color-blue-light;
                    bottom: calc(50% - 12px);
                }
            }

            @media (min-width: $break-medium) {
                margin-top: 8px;
            }

            @media (min-width: $break-large) {
                margin-top: 14px;
            }
        }

        button#goals-btn[aria-current="false"] + .toggle-slider {
            &:before {
                margin-left: calc(100% - 8px);
                @media (min-width: $break-medium) {
                    margin-left: calc(100% - 14spx);
                }
            }
        }
    }

    &__tabs {
        margin: 40px 0;
        display: none;

        @media (min-width: $break-large) {
            display: block;
            flex: 1;
            margin: 0;
        }

        &__list {
            @media (min-width: $break-large) {
                display: flex;
                flex-direction: column;
                gap: 8px;
            }
        }
    }

    .form__item {
        display: none;
        background-color: $color-white;
        color: $color-black;
        margin: 0;
        border-radius: 0 0 8px 8px;
        padding: 16px 21px 24px;
        @include fontsize(16px);
        line-height: 1.52;

        h3 {
            display: none;
        }

        @media (min-width: $break-large) {
            h3 {
                display: block;
                margin: 0 0 24px;
                padding: 64px 40px 0;
            }
            p {
                padding: 0 40px;
            }
        }
    }

    &__panels {
        margin: 40px 0;
        display: flex;
        flex-direction: column;
        gap: 8px;

        @media (min-width: $break-large) {
            position: relative;
            flex: 1;
            margin: 0;
            gap: 0;
            height: 100%;

            .toggle-subfilters {
                display: none;
            }

            .form__item {
                position: absolute;
                width: 100%;
                height: 100%;
                border-radius: 8px;
                display: flex;
                flex-direction: column;
                padding: 0;
                overflow: hidden;

                &__wrapper {
                    display: flex;
                    flex-direction: column;
                    height: 100%;
                }
            }

            .goal-selector__panel__wrapper {
                .form__item {
                    display: none;
                }
                &:first-of-type .form__item {
                    display: flex;
                }
            }
        }
    }

    .goal-cta.cta {
        @include cta-arrow($color-blue-dark, $color-blue-dark, $color-white, $color-blue-light, $color-blue-light, $color-blue-dark);

        @media (min-width: $break-large) {
            @include cta-arrow($color-blue-dark, $color-blue-light, $color-blue-dark, $color-blue-dark, $color-blue-dark, $color-white);
            margin-left: 85px;
        }
    }

    .cta-wrapper {
        & > img {
            display: none;
        }

        @media (min-width: $break-large) {
            margin-top: auto;
            background-color: $color-blue-light;
            position: relative;
            display: flex;
            padding: 40px 40px;

            & > img {
                display: block;
                position: absolute;
                left: 40px;
                width: 54px;
                top: calc(50% - 32px);
            }
        }
    }

    .interest-section {

        &__wrapper {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;

            @media (min-width: $break-medium) {
                grid-template-columns: 1fr 1fr 1fr;
                gap: 20px;
            }

            @media (min-width: $break-large) {
                grid-template-columns: 1fr 1fr 1fr 1fr;
                gap: 20px;
            }
        }

        .img-wrapper {
            aspect-ratio: 200/150;
            position: relative;
            overflow: hidden;
            img {
                aspect-ratio: 200/150;
                object-fit: cover;
                transition: all .3s ease;
                width: 100%;
            }
        }

        span.content {
            padding: 14px;
            color: $color-black;
            @include fontsize(14px);
            line-height: 1.2;
            border-top:  3px solid $color-blue-dark;
            transition: all .3s ease;

            @media (min-width: $break-medium) {
                border-top: 3px solid $color-blue-dark;
                @include fontsize(18px);
                padding: 18px;
            }

            @media (min-width: $break-medium) {
                @include fontsize(22px);
                padding: 20px;
            }
        }

        &__item {
            border-radius: 8px;
            overflow: hidden;
            position: relative;
        }

        a {
            display: flex;
            flex-direction: column;
            background-color: $color-blue-light;
            position: static;
            z-index: 10;

            &:focus {
                outline-offset: -6px;
            }

            img {
                position: relative;
                z-index: -1;
            }

            &:before {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background: transparent;
            }

            &:hover {
                background-color: $color-green-light;
                .img-wrapper img {
                    scale: 1.05;
                }
            }
        }

        @media (min-width: $break-large) {
            max-width: 1640px;
            margin-left: auto;
            margin-right: auto;
        }
    }
}