@use '../function' as *;

@mixin roolith-accordion() {
    .accordion {
        border-top: rem(1) solid var(--r-accordion-border-color);
    }

    .accordion-item {
        padding: rem(10) 0;
        border-bottom: rem(1) solid var(--r-accordion-border-color);
    }

    .accordion-item-title {
        font-size: rem(16);
        line-height: rem(22);
        font-weight: var(--r-global-font-bold-weight);
        position: relative;
        padding: rem(5) 0;
        cursor: pointer;

        &:after {
            position: absolute;
            right: rem(5);
            top: rem(7);
            border-style: solid;
            border-width: rem(1) rem(1) 0 0;
            content: '';
            display: inline-block;
            width: rem(10);
            height: rem(10);
            transform: rotate(135deg);
            vertical-align: top;
        }
    }

    .active .accordion-item-title:after {
        transform: rotate(-45deg);
    }

    .accordion-item-body {
        display: none;
        padding: rem(10) 0 0;

        .active & {
            display: block;
        }
    }
}