@import '../2-Tools/transitions';

.accordion {

    .item {
        margin-bottom: 7px;
        border-radius: 3px;
        transition: $transition-fast-out;
        
        @include themify($themes) {
            background-color: themed('accordionBackground');
        }

        header {
            padding: 5px 0;
            cursor: pointer;
            display: flex;
            align-items: center;
            transition: inherit;
            padding: 5px 7.5px;
            border-top-right-radius: inherit;
            border-top-left-radius: inherit;

            @include themify($themes) {
                background-color: themed('accordionHeaderBackground');
            }

            span {
                flex: 1;

                @include laptop-and-up {
                    flex: 0;
                }
            }

            i.material-icons {
                transform: rotate(-90deg);
                transition: inherit;
            }
        }
    
        main {
            transition: inherit;
            opacity: 0;
            border-bottom-right-radius: inherit;
            border-bottom-left-radius: inherit;
            overflow: auto;
        }
        

        &.active {
            header {
                i.material-icons {
                    transform: rotate(-270deg);
                }
            }
            main {
                opacity: 1;
                padding: 5px 7.5px;
            }
        }

        &.icon-right {
            span {
                flex: 1;
            }
        }
    }
}