.accordion {
    display: block;
    position: relative;

    border-radius: 2px;
    background-color: white;

    border-width: 1px 1px 0;
    border-style: solid;
    border-color: #EFF1F6;

    margin: 5px;

    .accordion-panel {
        &.is-open {
            .accordion-panel-content {
                opacity: 1;
                max-height: 500px;
                overflow: auto;

                padding: 5px 10px;
            }

            .accordion-arrow {
                transform: rotate(180deg);
            }
        }

        .accordion-panel-title {
            position: relative;

            border-bottom-width: 1px;
            border-bottom-style: solid;
            border-bottom-color: #EFF1F6;

            z-index: 1;

            .accordion-clickable {
                display: block;

                padding: 5px 10px;
                margin: 0;

                cursor: pointer;
            }

            .accordion-arrow {
                position: absolute;
                right: 10px;
                top: 5px;

                font-size: 10px;
                font-weight: 100;
                color: #bdbdbd;

                transition: all 500ms ease;
            }
        }

        .accordion-panel-content {
            border-bottom-width: 1px;
            border-bottom-style: solid;
            border-bottom-color: #EFF1F6;

            opacity: 0;
            max-height: 0;
            overflow: hidden;

            padding: 0 10px;

            transition: all 500ms ease;
        }
    }
}