:root {
    --rolv-animation-duration: 500ms;
}

.rolv-Overlay {
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    margin: 0;
    max-width: 100%;
    overflow-x: hidden;
    padding: 0;
    inset-block-start: 0px;
    inset-block-end: 0px;
    width: 100%;
    height: auto;
    overflow: visible;
    position: relative;
    max-height: none;
}

.rolv-Overlay--fallback {
    height: 100%;
    overflow-y: auto;
    position: fixed;
}

/* hide intermedia */
.rolv-Overlay:not([data-rolv-visible])[data-rolv-state="opening"] {
    opacity: 0;
}

.rolv-Overlay::backdrop {
    opacity: 0;
    transition: opacity var(--rolv-animation-duration);
}

.rolv-Overlay[data-rolv-visible]::backdrop {
    opacity: 1;
}

.rolv-Overlay[hidden] {
    display: none;
}

.rolv-Overlay:focus-visible {
    outline: none;
}

.rolv-Overlay:not([data-rolv-visible]) {
    pointer-events: none;
}

.rolv-Overlay[data-rolv-state="frozen"]{
    overflow-y: hidden;
}

/* default animations */

.rolv-Overlay--layout-x-centered > * {
    margin-left: auto;
    margin-right: auto;
}

.rolv-Overlay--layout-x-centered[data-rolv-state="frozen"] {

}

.rolv-Overlay--layout-x-fill[data-rolv-state="frozen"] {
    width: 100%;
}

.rolv-Overlay--layout-x-right > * {
    margin-left: auto;
    margin-right: 0;
}

.rolv-Overlay--layout-x-right[data-rolv-state="frozen"] > * {

}

.rolv-Overlay--layout-x-left > * {
    margin-left: 0;
    margin-right: auto;
}

.rolv-Overlay--layout-y-bottom > * {
    margin: auto;
    margin-bottom: 0;
}

.rolv-Overlay--layout-y-centered > * {
    margin-bottom: auto;
    margin-top: auto;
}

.rolv-Overlay--layout-y-fill[data-rolv-state="frozen"] {
    height: 100%;
}

.rolv-Overlay--layout-y-top > * {
    margin: auto;
    margin-top: 0;
}

.rolv-Overlay--animation-fade {
    opacity: 0;
    transition: opacity var(--rolv-animation-duration);
}

.rolv-Overlay--animation-fade[data-rolv-visible] {
    opacity: 1;
}


.rolv-Overlay--animation-slide-left > * {
    transition: transform var(--rolv-animation-duration);
    transform: translateX(-100%);
}

.rolv-Overlay--animation-slide-left[data-rolv-visible] > * {
    transform: translateX(0%);
}

.rolv-Overlay--animation-slide-right > * {
    transition: transform var(--rolv-animation-duration);
    transform: translateX(100%);
}

.rolv-Overlay--animation-slide-right[data-rolv-visible] > * {
    transform: translateX(0%);
}

.rolv-Overlay--animation-slide-up > * {
    transition: transform var(--rolv-animation-duration);
    transform: translateY(100%);
}

.rolv-Overlay--animation-slide-up[data-rolv-visible] > * {
    transform: translateX(0%);
}

.rolv-Overlay--animation-slide-down > * {
    transition: transform var(--rolv-animation-duration);
    transform: translateX(-100%);
}

.rolv-Overlay--animation-slide-down[data-rolv-visible] > * {
    transform: translateX(0%);
}