.collapsible {
    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
    }

    .content {
        transition: max-height 0.3s ease-in-out;
        overflow: hidden;
        &.visible {
            overflow: visible;
        }
    }

    .icon {
        display: inline-flex;
        margin-inline-start: 5px;
        font-size: 50%;
        transition: transform 0.3s ease-in-out;
        transform: rotate(0);
    }

    &.open > .header > .icon {
        transform: rotate(180deg);
    }
}

.help-icon {
    margin-inline-start: 5px;
}