:root {
    --tdm-drawer-width: 400px;
    --tdm-drawer-speed: .2s;
    --tdm-drawer-background: #ececec;
    --tdm-backdrop-background: rgba(0,0,0,.5);
}

.drawer-menu,
[data-drawer-backdrop] {
    top: 0;
    right: 0;
    position: fixed;
    display: block;
    display: none;
    height: 100%;
}

[data-drawer] .drawer-menu,
[data-drawer] [data-drawer-backdrop] {
    display: block;
}

.drawer-menu {
    z-index: 99999;
    overflow-x: auto;
    margin-right: calc(var(--tdm-drawer-width) * -1);
    width: var(--tdm-drawer-width);
    transition: margin-left var(--tdm-drawer-speed);
    background: var(--tdm-drawer-background);
}

[data-drawer-backdrop] {
    z-index: 99998;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    background: var(--tdm-backdrop-background);
    transition-property: opacity, visibility;
    transition-duration: var(--tdm-drawer-speed), 0s;
    transition-delay: 0s, var(--tdm-drawer-speed);
}

[data-drawer="true"] {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

    [data-drawer="true"] [data-drawer-backdrop] {
        visibility: visible;
        opacity: 1;
        transition-property: visibility, opacity;
        transition-duration: 0s, var(--tdm-drawer-speed);
        transition-delay: 0s, 0s;
    }

    [data-drawer="true"] .drawer-menu {
        margin-right: 0;
        transition: margin-right var(--tdm-drawer-speed);
    }

[data-drawer-backdrop]:before {
    content: '';
    height: 2rem;
    width: 2rem;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
    background-size: 2rem;
    display: block;
    margin-top: 1rem;
    margin-right: calc(var(--tdm-drawer-width) + 1rem);
    margin-left: auto;
    opacity: .5;
}