/* Copyright (C) 2016 NooBaa */

drawer {
    z-index: 999;

    .drawer-wrapper {
        .fill();
        overflow: hidden;

        &.opened {
            > .drawer-backdrop {
                opacity: 1;
            }

            > .drawer-content {
                transform: translateX(0);
            }
        }
    }

    .drawer-backdrop {
        .fill();
        background-color: rgba(var(--shadow1));
        opacity: 0;
        transition: opacity 300ms linear;
    }

    .drawer-content {
        .fill();
        .column();
        background-color: rgb(var(--color01));
        left: auto;
        width: 650px;
        box-shadow: 0 0 20px rgb(var(--color18));
        transform: translateX(100%);
        transition: transform 300ms ease-out;
    }
}
