details {
    margin-bottom: $gutter-half;
    @include media(tablet) {
        margin-bottom: $gutter;
    }
    .panel {
        margin-bottom: 0;
    }
}

.js-enabled {
    details.focused {
        outline: $focus-outline;
    }
    summary {
        &:focus {
            outline: none;
        }
    }
}

details {
    margin-bottom: $gutter-half;
    @include media(tablet) {
        margin-bottom: $gutter;
    }
    .panel {
        margin-bottom: 0;
    }
}

.button + details {
    margin-top: $gutter-half;
    @include media(tablet) {
        margin-top: $gutter;
    }
}

.js-enabled {
    details.focused {
        outline: $focus-outline;
    }
    summary {
        &:focus {
            outline: none;
        }
    }
}

Add margin to the top of details elements
Add margin to the top of details elements

Add margin to the top of details elements when it follows a `.button`, this removes the need to wrap button links in an arbitrary paragraph tag.
