@layer theme {
    :root {

    }

    body {
        --box-roundness: 15px;

        /*
        background-color: var(--ui-50);
        --page-bg:var(--ui-50);
        font-family: var(--font-mono),monospace;
        */
    }


    .themed-header {
        border-bottom: 1px solid var(--border-color);
        padding: var(--spaceing-sm) var(--spaceing-lg);
        min-height: 42px;
        font-size: var(--font-size-base);
        display: flex;
        align-items: center;
        --stripe-color: var(--ui-100);
        --stripe-bg-color: var(--ui-50);
        --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;
    }

    @media (min-width: 600px) {
        :root {
            --box-roundness: 5px;
        }

    }

    .ui-striped-frame {
        --stripe-color: var(--ui-150);
        --stripe-bg-color: var(--ui-50);
        --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;
        border: 1px solid var(--ui-150);
        padding: var(--spaceing-sm);
    }

    .dotted-bg {
        background-image: radial-gradient(var(--ui-150) 0.5px, transparent 0.5px);
        background-size: 10px 10px;
        background-color: var(--ui-0);
    }

    .striped-bg {
        --stripe-color: var(--ui-100);
        --stripe-bg-color: var(--ui-50);
        --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;
    }
}