.collapsible {
    .collapsible-title {
        line-height: 1em;
        display: flex;
        align-items: center;
        appearance: none;
        background: transparent;
        border: 0;
        color: inherit;

        .arrow {
            font-size: 1.3em;
            transition: transform 250ms ease-in;
        }
    }

    .collapsible-body {
        height: 0;
        overflow: hidden;

        &.fully-expanded {
            overflow: visible;
        }
    }

    .collapsible-inner-body {
        padding-top: 0.5em;
        opacity: 0;
    }

    &.expanded {
        .collapsible-title .arrow {
            transform: rotate(90deg);
        }

        .collapsible-inner-body {
            opacity: 1;
        }
    }

    &.with-transition {
        .collapsible-body {
            transition: height 250ms ease-in;
        }

        .collapsible-inner-body {
            transition: opacity 250ms ease-in;
        }
    }
}