@import (once) "../../include/vars";
@import (once) "../../include/mixins";

:root {
    --accordion-heading-background: #f8f8f8;
    --accordion-heading-color: #191919;
}

.dark-side {
    --accordion-heading-background: #2b2d30;
    --accordion-heading-color: #dfe1e5;
}

.accordion {
    .reset-list();
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.accordion {
    & > .frame {
        display: block;
        margin: 1px 0;

        & > .heading {
            display: flex;
            align-items: center;
            position: relative;
            padding: 8px 16px;
            background-color: var(--accordion-heading-background);
            color: var(--accordion-heading-color);
            cursor: pointer;
            .ellipsis();
            border-radius: 6px;
        }

        & > .content {
            display: block;
        }
    }
}

.accordion.marker-on {
    .heading {
        padding-left: 40px;

        &::before {
            line-height: 1;
            display: flex;
            content: "▶";
            position: absolute;
            left: 0;
            top: 3px;
            font-size: 16px;
            width: 34px;
            height: 34px;
            text-align: center;
            transform: rotate(0);
            transition: transform @transition-speed;
            transform-origin: center center;
            align-items: center;
            justify-content: center;
        }
    }

    .frame {
        &.active {
            & > .heading {
                &::before {
                    transform: rotate(90deg);
                    transition: transform @transition-speed;
                }
            }
        }
    }

    &[dir=rtl] {
        .heading {
            padding-left: 1rem;
            padding-right: 32px;
            &::before {
                left: auto;
                right: 0;
            }
        }
        .frame {
            &.active {
                & > .heading {
                    &::before {
                        transform: rotate(-90deg);
                        transition: transform @transition-speed;
                    }
                }
            }
        }
    }
}

.accordion {
    &.material {
        .heading {
            &::before {
                display: none;
            }
        }

        & > .frame > .heading {
            padding: 16px 42px 16px 16px;
            font-size: 16px;
            background-color: var(--accordion-heading-background);
            color: var(--accordion-heading-color);
            border-radius: 1rem;

            &::after {
                display: block;
                content: "\203A";
                position: absolute;
                right: 16px;
                top: 50%;
                margin-top: -20px;
                font-size: 32px;
                width: 40px;
                height: 40px;
                text-align: center;
                line-height: 1;
                transform: rotate(0);
                transition: transform @transition-speed;
                transform-origin: 50% 50%;
            }
        }

        & > .frame > .content {
            font-size: 14px;
        }

        & > .frame {
            &.active {
                .heading {
                    &::after {
                        transform: rotate(90deg);
                        transition: transform @transition-speed;
                    }
                }
            }
        }
    }
}

.accordion.rtl, .accordion[dir=rtl] {
    &.material {
        & > .frame > .heading {
            padding: 16px 16px 16px 42px;

            &::after {
                left: 16px;
                right: auto;
                top: 8px;
                .rotate(180deg);
            }
        }

        & > .frame {
            &.active {
                .heading {
                    &::after {
                        transform: rotate(270deg);
                    }
                }
            }
        }
    }
}