.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 {
            position: absolute;
            svg{
                transform: scale(1) translateY(0);
            }
        }

        .bd-chevron2{
            position: absolute;
            svg{
                visibility: hidden;
                transform: scale(1.4,.5) translateY(6px) rotate(180deg);
            }
        }

        svg {
            transition: transform .2s cubic-bezier(.2,0,0,1);
        }
    }

    .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: scale(1.4,.5) translateY(-6px);
                        visibility: hidden;
                    }
                }
            }

            .bd-chevron2 {
                svg {
                    visibility: visible;
                    transform: scale(1) translateY(0) rotate(180deg);
                }
            }
        }

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

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