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

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

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

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

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

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

.AccordionRow {
    display: block;
    position: relative;
    transition: height 0.3s;

    &:after {
        content: '';
        border-bottom: functions.pxRem(1) solid;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }

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

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

        > .AccordionRowSummary {
            .AccordionRowSummaryHandIcon {
                transform: rotate(90deg);
                opacity: 1;
            }

            .AccordionRowSummaryIcon {
                &:after {
                    height: 0;
                }
            }
        }
    }
}

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

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

    &::marker {
        content: none;
    }

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

    &:hover {
        .AccordionRowSummaryHandIcon {
            opacity: 1;
        }
    }
}

.AccordionRowSummaryHandIcon {
    display: none;

    @media all and (min-width: functions.em(768)) {
        width: functions.pxRem(57);
        display: block;
        position: absolute;
        top: functions.pxRem(45);
        right: 100%;
        margin-right: functions.pxRem(50);
        transform: rotate(0deg);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.3s, opacity 0.3s;
    }
}

.AccordionRowSummaryIcon {
    width: functions.pxRem(18);
    height: functions.pxRem(18);
    display: grid;

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

    &: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;
    }
}

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

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

.AccordionRowContentInner {
    padding-bottom: functions.pxRem(40);
}

.AccordionRowButton {
    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);
    }
}