.accordion {
    border-radius: var(--anresis-accordion-radius);

    > .accordion-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        padding: var(--anresis-accordion-trigger-padding);
        cursor: pointer;
        gap: var(--anresis-spacing-7);
        background-color: var(--anresis-accordion-trigger-background-color);


        &:hover {
            background-color: var(--anresis-accordion-trigger-active-background-color);
        }

        @media (max-width: 479px) {
            padding: var(--anresis-spacing-4);
            gap: var(--anresis-spacing-4);
        }

        .accordion-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--anresis-color-secondary-background);
            border-radius: 50%;
            width: 180px;
            height: 180px;
            flex-shrink: 0;

            &:has(span) {
                background-color: transparent !important;
                font: var(--anresis-font-accordion-icon-text);
                width: auto !important;
                height: auto !important;
            }

            > span {
                color: var(--anresis-color-primary-text);
                font-size: 1em;
            }


            > img {
                width: 90px;
                height: 90px;
                object-fit: contain;
            }

            @media (max-width: 1199px) {
                width: 150px;
                height: 150px;

                > img {
                    width: 75px;
                    height: 75px;
                }
            }

            @media (max-width: 1023px) {
                width: 100px;
                height: 100px;

                > img {
                    width: 50px;
                    height: 50px;
                }
            }

            @media (max-width: 767px) {
                width: 70px;
                height: 70px;

                > img {
                    width: 35px;
                    height: 35px;
                }
            }
        }

        .accordion-title {
            font: var(--anresis-font-accordion-title);
            font-weight: var(--anresis-font-weight-regular);
            padding: 0;
            margin: 0;
            width: 80%
        }

        .accordion-trigger-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 10%;
            flex-shrink: 0;

            img {
                height: 40px;
                width: 40px;
                object-fit: contain;
                filter: var(--anresis-color-primary-filter);
            }
        }

        .accordion-trigger-icon-plus {
            display: block;
        }

        .accordion-trigger-icon-minus {
            display: none;
        }
    }

    > .accordion-content {
        display: none;
        padding-block: var(--anresis-spacing-7);

        > .frame:first-child {
            padding-block-start: 0;
        }    
        
        > .frame:last-child {
            padding-block-end: 0;
        }

        > .accordion-close {
            display: flex;
            gap: var(--anresis-spacing-1);
            align-items: center;
            cursor: pointer;
            color: var(--anresis-color-grey-7-text);
            text-transform: uppercase;
            justify-self: flex-end;
            font: var(--anresis-font-accordion-close);

            > img {
                filter: var(--anresis-color-grey-7-filter);
                width: 1em;
                height: 1em;
                object-fit: contain;
            }

            &:hover {
                color: var(--anresis-color-primary-text);

                > img {
                    filter: var(--anresis-color-primary-filter);
                }
            }
        }
    }

    &.is-active {
        > .accordion-trigger {
            background-color: var(--anresis-accordion-trigger-active-background-color);

            &:hover {
            background-color: var(--anresis-accordion-trigger-active-background-color);
            }

            .accordion-trigger-icon-plus {
                display: none;
            }

            .accordion-trigger-icon-minus {
                display: block;
            }
        }

        > .accordion-content {
            display: block;
        }


    }

    &:has(.accordion-icon) {
        > .accordion-trigger {
            .accordion-title {
                width: 60%
            }
        }
    }
}

.accordion-tile-trigger {
    position: relative;
    cursor: pointer;
    background-color: var(--anresis-color-secondary-background);
    display: flex;
    gap: var(--anresis-spacing-7);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--anresis-spacing-7);
    height: 300px;
            
    &:is(:has(.accordion-icon-active), :has(.accordion-icon-active)) {      
        justify-content: space-between;
    }


    > .accordion-title {
        text-align: center;
        font: var(--anresis-font-accordion-tile-title);
        color: var(--anresis-color-white-text);
        width: auto;
        margin: 0;
    }

    &:hover {
        background-color: var(--anresis-color-secondary-dark-background);
    }

    .accordion-icon-active,
    .accordion-icon-inactive {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;

        > img {
            width: auto;
            height: 180px;
            object-fit: contain;
            display: block;
        }
    }

    .accordion-icon-active {
        display: none;
    }

    &.is-active {
        background-color: var(--anresis-color-grey-2-background);
        &::after {
            content: "";
            opacity: 1;
            display: block;
            height: 0;
            width: 0;
            position: absolute;
            bottom: -34px;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-bottom: 15px solid var(--anresis-color-grey-2-background);
        }

        & + .accordion-tile-content {
            display: block;
        }

        > .accordion-title {
            /*display: none;*/
            color: var(--anresis-color-secondary-text);
        }

        .accordion-icon-inactive {
            display: none;
        }

        .accordion-icon-active {
            display: block;
        }
    }

}

.accordion-tile-content {
    position: relative;
    display: none;
    grid-column: 1 / -1;
    background-color: var(--anresis-color-grey-2-background);
    margin-block: var(--anresis-spacing-7);
    padding: var(--anresis-spacing-7);

    > .accordion-title {
        font: var(--anresis-font-h2);
    }

    .frame-type-foresite_anresislead {
        padding-block: 0;

        p {
            font-weight: var(--anresis-font-weight-light);
        }

        & + .frame {
            padding-block-start: var(--anresis-spacing-1);
        }
    }

    > .accordion-tile-close {
        cursor: pointer;
        display: block;
        position: absolute;
        inset-block-start: 16px;
        inset-inline-end: 16px;
        > img {
            width: 24px;
            height: 24px;
        }

        &:hover {
            > img {
                filter: var(--anresis-color-primary-filter);
            }
        }
    }

    > .accordion-close {
        display: flex;
        gap: var(--anresis-spacing-1);
        align-items: center;
        cursor: pointer;
        color: var(--anresis-color-grey-7-text);
        text-transform: uppercase;
        justify-self: flex-end;
        font: var(--anresis-font-accordion-close);

        > img {
            filter: var(--anresis-color-grey-7-filter);
            width: 1em;
            height: 1em;
            object-fit: contain;
        }

        &:hover {
            color: var(--anresis-color-primary-text);

            > img {
                filter: var(--anresis-color-primary-filter);
            }
        }
    }
}