//  SCSS Variables
$mmprfx: ".mm-ocd";

$mmocd_transition_duration: 0.3s !default;

//  CSS variables
:root {
    /** Width for the drawer. */
    --mm-ocd-width: 80%;

    /** Min-width for the drawer. */
    --mm-ocd-min-width: 200px;

    /** Max-width for the drawer. */
    --mm-ocd-max-width: 440px;
}

//  The rest of the page
body#{$mmprfx}-opened {
    //  Somewhat prevents scrolling.
    overflow-y: hidden;
    overscroll-behavior: none;
}

//  The wrapper
#{$mmprfx} {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 100%;
    left: 0;
    z-index: 9999;
    overflow: hidden;
    overscroll-behavior: contain;
    background: rgba(#000, 0);
    transition: {
        property: bottom, background-color;
        duration: 0s, $mmocd_transition_duration;
        timing-function: ease;
        delay: $mmocd_transition_duration * 1.5,
            $mmocd_transition_duration * 0.5;
    }

    &--open {
        bottom: 0;
        background: rgba(#000, 0.25);
        transition-delay: 0s;
    }
}

//  The content
#{$mmprfx}__content {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;

    width: var(--mm-ocd-width);
    min-width: var(--mm-ocd-min-width);
    max-width: var(--mm-ocd-max-width);

    background: #fff;
    transition: {
        property: transform;
        duration: $mmocd_transition_duration;
        timing-function: ease;
    }

    #{$mmprfx}--left & {
        left: 0;
        transform: translate3d(-100%, 0, 0);
    }

    #{$mmprfx}--right & {
        right: 0;
        transform: translate3d(100%, 0, 0);
    }

    #{$mmprfx}--open & {
        transform: translate3d(0, 0, 0);
    }
}

//  The backdrop
#{$mmprfx}__backdrop {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 3;

    width: clamp(
        calc(100% - var(--mm-ocd-max-width)),
        calc(100% - var(--mm-ocd-width)),
        calc(100% - var(--mm-ocd-min-width))
    );

    background: rgba(3, 2, 1, 0);

    #{$mmprfx}--left & {
        right: 0;
    }

    #{$mmprfx}--right & {
        left: 0;
    }
}