@use '../../../styles/tools/functions';
@use '../../../styles/settings/colours';

.FAQsWrap {
    margin-top: functions.pxRem(40);

    @media all and (min-width: functions.em(768)) {
        margin-top: functions.pxRem(80);
    }

    &:first-child {
        margin-top: 0;
    }
}

.FAQsColumnContainer {
    &--Stacked {
        .TextColumn, .FAQsColumn {
            width: 100%;
        }

        .FAQsRow {
            @media all and (min-width: functions.em(1024)) {
                border-radius: functions.pxRem(20);
            }
        }

        .FAQsRowSummary {
            @media all and (min-width: functions.em(1024)) {
                padding: functions.pxRem(60);
            }
        }

        .FAQsRowSummaryIcon {
            @media all and (min-width: functions.em(1024)) {
                width: functions.pxRem(16);
                height: functions.pxRem(16);
            }
        
            &:before, &:after {
                @media all and (min-width: functions.em(1024)) {
                    border-width: functions.pxRem(4);
                }
            }
        }

        .FAQsRowContent {
            @media all and (min-width: functions.em(1024)) {
                padding-left: functions.pxRem(60);
                padding-right: functions.pxRem(60);
            }
        }

        .FAQsRowContentInner {
            @media all and (min-width: functions.em(768)) {
                max-width: functions.pxRem(890);
                margin-top: functions.pxRem(-20);
                margin-left: auto;
                margin-right: auto;
                padding-bottom: functions.pxRem(60);
                display: flex;
                align-items: center;
                gap: functions.pxRem(24);
                justify-content: space-between;
            }
        }

        .FAQsRowContentText {
            @media all and (min-width: functions.em(768)) {
                max-width: functions.pxRem(550);
            }

            &:first-child {
                @media all and (min-width: functions.em(768)) {
                    max-width: none;
                }
            }
        }
    }
}

.FAQsColumn {
    width: 100%;
    margin-left: auto;

    @media all and (min-width: functions.em(768)) {
        width: 66.6666%;
    }
}

.FAQsRow {
    display: block;
    position: relative;
    border-radius: functions.pxRem(10);
    margin-bottom: functions.pxRem(12);
    transition: height 0.3s;

    @media all and (min-width: functions.em(768)) {
        margin-bottom: functions.pxRem(24);
    }

    &--White {
        background-color: #FFF;
        fill: colours.$orange;
        color: colours.$orange;
    }

    &--LightOrange {
        background-color: colours.$orange-light;
        fill: colours.$orange;
        color: colours.$orange;
    }

    &--Active {
        > .FAQsRowContent {
            height: auto;
            opacity: 1;
            transition: opacity 0.3s 0.3s;

            @media (prefers-reduced-motion) {
                transition: opacity 0.3s;
            }
        }

        > .FAQsRowSummary {
            .FAQsRowSummaryIcon {
                &:after {
                    height: 0;
                }
            }
        }
    }
}

.FAQsRowSummary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: functions.pxRem(6);
    padding: functions.pxRem(20);
    box-sizing: border-box;
    cursor: pointer;

    @media all and (min-width: functions.em(768)) {
        padding: functions.pxRem(30);
    }

    &::marker {
        content: none;
    }

    &::-webkit-details-marker {
        display:none;
    }
}

.FAQsRowSummaryIcon {
    width: functions.pxRem(12);
    height: functions.pxRem(12);
    display: grid;

    &:before, &:after {
        content: '';
        grid-column: 1;
        grid-row: 1;
        margin: auto;
    }

    &:before {
        width: 100%;
        border-bottom: functions.pxRem(2) solid;
    }

    &:after {
        height: 100%;
        border-right: functions.pxRem(2) solid;
        transition: height 0.3s;
    }
}

.FAQsRowContent {
    height: 0;
    opacity: 0;
    box-sizing: border-box;
    transition: opacity 0.3s;

    @media (prefers-reduced-motion) {
        transition: none;
    }
}

.FAQsRowContent {
    padding-left: functions.pxRem(20);
    padding-right: functions.pxRem(20);

    @media all and (min-width: functions.em(768)) {
        padding-left: functions.pxRem(30);
        padding-right: functions.pxRem(30);
    }
}

.FAQsRowContentInner {
    padding-bottom: functions.pxRem(20);

    @media all and (min-width: functions.em(768)) {
        max-width: functions.pxRem(890);
        margin-top: functions.pxRem(-10);
        padding-bottom: functions.pxRem(30);
    }
}

.FAQsRowContentIcon {
    width: functions.pxRem(200);
    height: functions.pxRem(200);
    margin-bottom: functions.pxRem(20);
    display: block;
    flex-shrink: 0;

    @media all and (min-width: functions.em(768)) {
        margin-bottom: 0;
    }
}

.FAQsRowButton {
    width: 100%;
    margin-top: functions.pxRem(20);

    @media all and (min-width: functions.em(520)) {
        width: auto;
    }

    @media all and (min-width: functions.em(768)) {
        margin-top: functions.pxRem(40);
    }
}