:root {
    --mm-ocd-width: calc(100% - 2 * var(--theme--gutter--normal));
    --mm-ocd-max-width: 480px;
    --mm-ocd-min-width: calc(320px - 2 * var(--theme--gutter--normal));

    --mm-ocd-height: auto;

    --mm-ocd-position-top: auto;
    --mm-ocd-position-right: auto;
    --mm-ocd-position-bottom: auto;
    --mm-ocd-position-left: auto;
    --mm-ocd-transform: translate3d(0, 0, 0);

    --mm-ocd-close-button-size: 48px;

    --mm-ocd-backdrop-color: var(--theme--color--primary);
    --mm-ocd-backdrop-opacity: 0.88;
}

/* mm-ocd */
.mm-ocd.mm-ocd--open {
    background: none;
    pointer-events: none;
}

/* mm-ocd__content */
.mm-ocd .mm-ocd__content {
    opacity: 0;
    -webkit-transition-property: opacity, top, bottom, -webkit-transform;
    transition-property: opacity, top, bottom, -webkit-transform;
    -o-transition-property: opacity, top, bottom, transform;
    transition-property: opacity, top, bottom, transform;
    transition-property: opacity, top, bottom, transform, -webkit-transform;
    pointer-events: auto;
    background: none;
    top: var(--mm-ocd-position-top);
    right: var(--mm-ocd-position-right);
    bottom: var(--mm-ocd-position-bottom);
    left: var(--mm-ocd-position-left);
    -webkit-transform: var(--mm-ocd-transform);
    transform: var(--mm-ocd-transform);
    width: var(--mm-ocd-width);
    max-width: calc(var(--mm-ocd-max-width));
    height: var(--mm-ocd-height);
}

.mm-ocd.mm-ocd--open .mm-ocd__content {
    opacity: 1;
}

/* mm-ocd__panel */
.mm-ocd .mm-ocd__panel {
    height: 100%;
    max-height: 100vh;
    overflow: auto;
    background: var(--theme--color--background);
    position: relative;
}

/* mm-ocd__backdrop */
.mm-ocd__backdrop {
    width: 100%;
    z-index: 1;
    background: var(--mm-ocd-backdrop-color);
    opacity: 0;
    pointer-events: auto;
    transition: opacity 0.3s ease;
}

.mm-ocd.mm-ocd--open .mm-ocd__backdrop {
    background: var(--mm-ocd-backdrop-color);
    opacity: var(--mm-ocd-backdrop-opacity);
}

.mm-ocd:not(.mm-ocd--close-on--backdrop) .mm-ocd__backdrop {
    pointer-events: none;
}

.mm-ocd:not(.mm-ocd--layout--backdrop) .mm-ocd__backdrop {
    opacity: 0;
}

/* mm-ocd__close */
.mm-ocd__close {
    position: absolute;
    z-index: 5;
    width: var(--mm-ocd-close-button-size);
    height: var(--mm-ocd-close-button-size);
    cursor: pointer;
    pointer-events: auto;
    top: var(--theme--gutter--normal);
    right: var(--theme--gutter--normal);
    opacity: 0;
}

.mm-ocd.mm-ocd--open .mm-ocd__close {
    opacity: 1;
}

.mm-ocd__close::before,
.mm-ocd__close::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 1px;
    height: 100%;
    background: var(--theme--color--text);
}

.mm-ocd__close::before {
    transform: translate(-50%, 0) rotate(-45deg);
}

.mm-ocd__close::after {
    transform: translate(-50%, 0) rotate(45deg);
}

.mm-ocd__close:hover::before,
.mm-ocd__close:hover::after {
    background: var(--theme--color--primary);
}

.mm-ocd > .mm-ocd__close::before,
.mm-ocd > .mm-ocd__close::after {
    background: var(--theme--color--background);
}

.mm-ocd > .mm-ocd__close:hover::before,
.mm-ocd > .mm-ocd__close:hover::after {
    background: var(--theme--color--background);
}