.drawer {
    display: inline;
    .drawer-content {
        position: fixed;
        display: none;
        background-color: white;
        box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.15), 1px 1px 17px rgba(0, 0, 0, 0.15);
        transition: all 160ms ease-in-out;
        &.left {
            top: 0;
            left: 0;
            bottom: 0;
            width: 250px;
            transform: translate(-250px, 0);
        }
        &.right {
            top: 0;
            right: 0;
            bottom: 0;
            width: 250px;
            transform: translate(250px, 0);
        }
        &.top {
            top: 0;
            left: 0;
            right: 0;
            height: 100px;
            transform: translate(0, -100px);
        }
        &.bottom {
            bottom: 0;
            left: 0;
            right: 0;
            height: 100px;
            transform: translate(0, 100px);
        }
    }
    &.open {
        .drawer-content {
            display: block;
            &.left,
            &.right,
            &.top,
            &.bottom {
                transform: translate(0, 0);
            }
        }
    }
}