:host {
    --dx-c-modal-drawer-z-index: 5000;
    --dx-c-modal-padding-around: var(--dx-g-spacing-smd);
    --dx-c-modal-height: calc(100vh - var(--dx-c-modal-padding-around) * 2);
}

dx-button {
    display: block;
    margin-left: auto;
}

.modal-drawer_container {
    background-color: white;
    height: var(--dx-c-modal-height);
    left: 0;
    padding: var(--dx-c-modal-padding-around);
    position: fixed;
    transform: translateX(-100%);
    transition: transform 0.4s ease;
    top: 0;
    width: inherit;
    z-index: var(--dx-c-modal-drawer-z-index);
    overflow-y: auto;
}

.modal-drawer_container.modal-drawer_active {
    transform: translateX(0);
}

.modal-drawer_overlay {
    background-color: #195594;
    bottom: 0;
    height: 100%;
    left: 0;
    opacity: 0.62;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: calc(var(--dx-c-modal-drawer-z-index) - 1);
}