@use "../common/utils" as *;
@use "../common/mixins" as *;

.megamenu {
    position: absolute;
    left: 0;
    top: 100%;
    right: 0;
    width: 100%;
    z-index: 999;
    visibility: hidden;
    clip-path: polygon(0 0, 100% 0%, 100% 0, 0 0);
    transition: clip-path 0.2s ease-in-out, visibility 0s 0.2s;

    &__inner {
        background: #FFF;
        border-radius: calc-rem(10px);
        border: 1px solid rgba(var(--color-border), 1);
        display: grid;
        grid-template-columns: repeat(2, 1fr);

        @include media-breakpoint-up(xl) {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    &__column {
        padding: calc-rem(40px);
        border-right: 1px solid rgba(var(--color-border));

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

        h3 {
            margin: calc-rem(0 0 5px 0);
            font-size: calc-rem(14px);
            font-family: var(--font-family-body);
            font-weight: var(--font-weight-bold);
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        &--cta {
            background: rgba(var(--color-border)) url('../images/megamenu-background.svg') no-repeat;
            background-size: cover;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            display: none;
            border-bottom-right-radius: calc-rem(10px);
            border-top-right-radius: calc-rem(10px);

            @include media-breakpoint-up(xl) {
                display: flex;
            }

            img {
                margin-bottom: calc-rem(15px);
            }

            h3 {
                margin-bottom: 0;
                font-variation-settings: var(--font-variation-settings-bold);
                text-transform: none;
            }
        }
    }

    &__navigation {
        display: grid;
        grid-template-columns: repeat(2, 1fr);

        > ul {
            margin-top: 10px;

            > li {
                a {
                    display: inline-block;
                    padding: calc-rem(10px 0 3px 0);
                    margin-bottom: calc-rem(8px);
                    color: rgba(var(--color-secondary), .8);
                    font-size: calc-rem(14px);
                    font-weight: 500;
                    text-decoration: none;
                    border-bottom: 1px solid #FFF;
                    line-height: 1;

                    &:hover {
                        border-bottom: 1px solid rgba(var(--color-primary), 1);
                    }
                }
            }
        }
    }

    &__usps {
        margin-top: calc-rem(15px);

        li {
            background: url('../images/icons/icon-check.svg') no-repeat center left;
            padding-left: calc-rem(25px);
            margin-bottom: calc-rem(15px);
        }
    }
}
