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

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

        .bd-drawer-contents > .bd-form-item:last-child > .bd-form-divider:last-child {
            display: none;
        }
    }

    .bd-form-header {
        margin-top: 0;
        cursor: pointer;

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

    .bd-drawer-open-button {
        position: relative;
        margin-right: 15px;

        .bd-chevron-1, .bd-chevron-2 {
            position: absolute;
        }

        svg {
            transition: transform 0.5s ease;
            transform: none;
        }
    }

    .bd-drawer-contents-wrap {
        overflow: hidden;
        min-height: 5px;
    }

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

        > .bd-form-item:last-child > .bd-form-divider:last-child {
            display: none;
        }
    }

    &.bd-animating {
        > .bd-drawer-contents-wrap {
            overflow: hidden;
        }
    }

    &.bd-drawer-open {
        > .bd-drawer-header .bd-drawer-open-button {
            .bd-chevron-1 {
                svg {
                    transform: rotate(90deg)
                }
            }

            .bd-chevron-2 {
                margin-left: -4px;
                svg {
                    transform: rotate(270deg)
                }
            }
        }

        > .bd-drawer-contents-wrap > .bd-drawer-contents {
            transform: scaleY(1) translateY(0%);
            margin-top: 0%;
            opacity: 1;

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