@layer components {
    .ui-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        &:after {

        }

        .overlay-bg {
            --overlay-bg-color: var(--ui-900);
            --overlay-opacity: 0.8;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            --stripe-color: var(--ui-200);
            --stripe-bg-color: var(--ui-100);
            --stripe-background:linear-gradient(-45deg, var(--stripe-color,var(--border-color-light)) 7.14%, var(--stripe-bg-color,transparent) 7.14%, var(--stripe-bg-color,transparent) 50%, var(--stripe-color,var(--border-color-light)) 50%, var(--stripe-color,var(--border-color-light)) 57.14%, var(--stripe-bg-color,transparent) 57.14%, var(--stripe-bg-color,transparent) 100%);
            background: var(--stripe-background);

            background-size: 7px 7px ;
            opacity: var(--overlay-opacity);
            z-index: -1;

            &.light {
                --overlay-opacity: 0.7;
                --overlay-bg-color: var(--ui-0);
                animation: fadeIn 300ms ease-in-out;
            }
        }
    }

    .ui-popover-container {
        animation: fadeAndSlideIn 300ms ease-in-out;
        width: 800px;
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--spaceing-md);
        margin: 0 var(--spaceing);
        margin-top: calc(3 * var(--spaceing-xxl));
        position: relative;

        .ui-document {
            flex: 1 1 auto;
            border-top-left-radius: var(--rounded-lg);
            border-top-right-radius: var(--rounded-lg);
        }
    }


    /* dark mode */
    @media (prefers-color-scheme: dark) {
        .ui-overlay .overlay-bg {
            --stripe-color: var(--ui-0);
            --stripe-bg-color: var(--ui-50);
        }
    }


    .ui-overlay-card {
        width: 100%;
        max-width: 300px;
        min-width: 300px;
        background-color: var(--bg-color);
        position: relative;
        border-radius: var(--rounded);
        border:1px solid var(--ui-200);

        hr {
            border-color: var(--border-color-light);
        }

        .outcut {
            width:40px;
            height:10px;
            background-color: var(--ui-200);
            border-radius: var(--rounded-lg);
        }

        &:after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--ui-200);
            z-index: -1;
            transform: rotate(-5deg);
            border-radius: var(--rounded);
        }
    }
}