.help {
    border: 1px solid $help-border-color;
    margin-bottom: map-get($spacers, 3);


    &__header {
        display: flex;
        color: $secondary;
        align-items: flex-start;
        padding: map-get($spacers, 2) map-get($spacers, 3);

        &:hover {
            cursor: pointer;
        }
    }

    &__title {
        flex: 1;
        margin: 0;
        font-size: 1rem;
        color: $primary;

        @include icon(mark-minus-circle, before);

        .collapsed & {
            @include icon(mark-plus-circle, before);
        }

        &:before {
            margin-left: map-get($spacers, 2);
            font-size: 1em;
            display: block;
            float: right;
        }
    }

    &__content {
        padding: map-get($spacers, 2) map-get($spacers, 3);
    }


    &__toggle {
        border: 0;
        width: 1.6rem;
        height: 1.6rem;
        border-radius: 50%;
        position: relative;
        outline: none !important;
        background-color: $secondary;

        &::after,
        &::before {
            top: 50%;
            left: 50%;
            content: ' ';
            width: .8rem;
            height: 1px;
            display: block;
            position: absolute;
            background-color: $white;
            transition: transform ease 250ms, opacity ease 250ms;
        }

        &::after {
            transform: translate(-50%) rotate(0deg);
        }

        &::before {
            opacity: 0;
            transform: translate(-50%) rotate(90deg);
        }
    }

    .collapsed &__toggle::after {
        transform: translate(-50%) rotate(-90deg);
    }

    .collapsed &__toggle::before {
        opacity: 1;
        transform: translate(-50%) rotate(0deg);
    }
}