.bd-drawer {
    margin-bottom: 15px;

    .bd-settingsCategory > & {
        border-bottom: 1px solid rgba(114, 118, 126, .3);

        .bd-drawerContents > .bd-formItem {
            &:last-child > .bd-formDivider {
                &:last-child {
                    display: none;
                }
            }
        }
    }

    .bd-formHeader {
        margin-top: 0;
        cursor: pointer;

        &:hover {
            color: rgba(255, 255, 255, .25);
        }
    }

    .bd-drawerOpenButton {
        position: relative;
        margin-right: 15px;

        .bd-chevron1,
        .bd-chevron2 {
            position: absolute;
        }

        svg {
            transition: transform .5s ease;
            transform: none;
        }
    }

    .bd-drawerContentsWrap {
        min-height: 5px;
    }

    .bd-drawerContents {
        // margin-top is set in JavaScript when the drawer is animating
        // It still needs to be set here for it to animate
        transition: transform .2s ease, margin-top .2s ease, opacity .2s ease;
        transform: scaleY(0) translateY(0%);
        margin-top: -100%;
        opacity: 0;

        > .bd-formItem {
            &:last-child > .bd-formDivider {
                &:last-child {
                    display: none;
                }
            }
        }
    }

    &.bd-animating,
    &:not(.bd-drawerOpen) {
        > .bd-drawerContentsWrap {
            overflow: hidden;
        }
    }

    &.bd-drawerOpen {
        > .bd-drawerHeader {
            .bd-drawerOpenButton {
                .bd-chevron1 {
                    svg {
                        transform: rotate(90deg);
                    }
                }
            }

            .bd-chevron2 {
                margin-left: -4px;

                svg {
                    transform: rotate(270deg);
                }
            }
        }

        > .bd-drawerContentsWrap > .bd-drawerContents {
            transform: scaleY(1) translateY(0%);
            margin-top: 0;
            opacity: 1;

            &::after {
                content: '';
                display: block;
                margin-top: 15px;
            }
        }
    }
}