.ui-overlay {
    --ui-overlay-padding: var(--space);

    position: fixed;
    right: var(--ui-overlay-padding);
    bottom: var(--ui-overlay-padding);
    left: var(--ui-overlay-padding);
    z-index: var(--theme-z-index-overlay);
}

@media (min-width: 700px) {
    .ui-overlay {
        left: auto;
    }

    .ui-overlay[t-position="bottom-left"] {
        right: auto;
        left: var(--ui-overlay-padding);
    }

    .ui-overlay[t-position="top-right"],
    .ui-overlay[t-position="top-center"] {
        top: var(--ui-overlay-padding);
        bottom: auto;
    }

    .ui-overlay[t-position="top-left"] {
        inset: var(--ui-overlay-padding) auto auto var(--ui-overlay-padding);
    }

    .ui-overlay[t-position="bottom-center"],
    .ui-overlay[t-position="top-center"] {
        right: auto;
        left: 50%;
        transform: translate(-50%, 0);
    }
}