/* SVUI universal semantic base */
@scope ([svui]) {
    :where(:scope, :scope *) {
        -webkit-tap-highlight-color: transparent;
    }

    :where(:scope, :scope *):focus {
        outline: none;
    }

    :where(:scope, :scope *)::selection {
        color: inherit;
        background: transparent;
    }

    :scope,
    :scope *,
    :scope *::before,
    :scope *::after {
        box-sizing: border-box;
    }

    :scope {
        font-size: var(--sv-font-size);
        text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
        scrollbar-width: thin;
        scrollbar-color: var(--sv-scrollbar-thumb-color) var(--sv-scrollbar-track-color);
    }

    body {
        margin: 0;
    }

    :where(img, picture, svg, video, canvas) {
        display: block;
        max-width: 100%;
    }

    :where(button, input, select, textarea) {
        color: inherit;
        font: inherit;
    }

    button {
        border: 0;
        padding: 0;
        background: none;
        cursor: pointer;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    a[href] {
        cursor: pointer;
    }

    :where(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote, pre, figure) {
        margin-block-start: 0;
        margin-block-end: 1em;
    }

    :where(h1, h2, h3, h4, h5, h6) {
        font-weight: var(--sv-fw-bold, 700);
        line-height: 1.2;
    }

    h1 {
        font-size: var(--sv-fs-h1, 2em);
        line-height: var(--sv-flh-h1, 1.12);
    }

    h2 {
        font-size: var(--sv-fs-h2, 1.5em);
        line-height: var(--sv-flh-h2, 1.18);
    }

    h3 {
        font-size: var(--sv-fs-h3, 1.25em);
        line-height: var(--sv-flh-h3, 1.25);
    }

    h4 {
        font-size: 1.125em;
    }

    h5 {
        font-size: 1em;
    }

    h6 {
        font-size: 0.875em;
    }

    :where(ul, ol) {
        padding-inline-start: 2em;
    }

    :where(dt) {
        font-weight: var(--sv-fw-bold, 700);
    }

    dd {
        margin-inline-start: 2em;
    }

    blockquote,
    figure {
        margin-inline: 0;
    }

    blockquote {
        padding-inline-start: 1em;
    }

    :where(code, kbd, samp, pre) {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    }

    pre {
        max-width: 100%;
        overflow-x: auto;
        white-space: pre;
    }

    pre code {
        font: inherit;
    }

    hr {
        height: 0;
        margin-block: 1.5em;
        border: 0;
        border-top: 1px solid currentColor;
    }

    figcaption {
        font-size: var(--sv-fs-caption, 0.875em);
        line-height: var(--sv-flh-caption, 1.4);
    }

    :where([hidden], [sv-state="hidden"]) {
        display: none !important;
    }

    :where([sv-role="group"], [sv-role="image"], [sv-role="video"]) {
        min-width: 0;
    }

    [sv-role="image"] {
        margin: 0;
    }

    [sv-role="image"] > :where(img, picture, a) {
        display: block;
        max-width: 100%;
    }

    [sv-role="image"] img {
        display: block;
        max-width: 100%;
        height: 100%;
    }

    [sv-role="video"] {
        width: min(100%, calc(var(--sv-content-video-max-height) * var(--sv-content-video-ratio)));
        max-width: 100%;
        height: auto;
        max-height: var(--sv-content-video-max-height);
        margin-inline: auto;
        aspect-ratio: var(--sv-content-video-ratio);
    }

    [sv-role="video"] > iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
    }

    :where(
        :has(> [sv-role="block"][sv-use~="float-left"]),
        :has(> [sv-role="block"][sv-use~="float-right"])
    ) {
        display: flow-root;
    }

    [sv-role="block"]:is([sv-use~="float-left"], [sv-use~="float-right"]) {
        width: var(--sv-content-float-width);
        max-width: 100%;
        margin-block: 0 var(--sv-content-float-gap-block);
    }

    [sv-role="block"][sv-use~="float-left"] {
        float: left;
        margin-inline: 0 var(--sv-content-float-gap-inline);
    }

    [sv-role="block"][sv-use~="float-right"] {
        float: right;
        margin-inline: var(--sv-content-float-gap-inline) 0;
    }

    [sv-role="block"]:is([sv-use~="float-left"], [sv-use~="float-right"]) > :first-child {
        margin-block-start: 0;
    }

    [sv-role="block"]:is([sv-use~="float-left"], [sv-use~="float-right"]) > :last-child {
        margin-block-end: 0;
    }

    [sv-role="grid"] {
        display: grid;
        min-width: 0;
        grid-template-columns: repeat(var(--svui-grid-columns, 2), minmax(0, 1fr));
    }

    [sv-role="grid"] > [sv-role="grid-item"] {
        min-width: 0;
        grid-column: span var(--svui-grid-column-span, 1);
        grid-row: span var(--svui-grid-row-span, 1);
    }

    :scope,
    :scope * {
        scrollbar-width: thin;
        scrollbar-color: var(--sv-scrollbar-thumb-color) var(--sv-scrollbar-track-color);
    }

    :scope::-webkit-scrollbar,
    :scope *::-webkit-scrollbar {
        width: var(--sv-scrollbar-width);
        height: var(--sv-scrollbar-height);
    }

    textarea::-webkit-scrollbar {
        width: var(--sv-scrollbar-textarea-width);
        height: var(--sv-scrollbar-textarea-height);
    }

    :scope::-webkit-scrollbar-track,
    :scope *::-webkit-scrollbar-track {
        background: var(--sv-scrollbar-track-color);
    }

    :scope::-webkit-scrollbar-thumb,
    :scope *::-webkit-scrollbar-thumb {
        border: none;
        background-color: var(--sv-scrollbar-thumb-color);
    }

    @media (max-width: 48rem) {
        [sv-role="block"]:is([sv-use~="float-left"], [sv-use~="float-right"]) {
            float: none;
            width: auto;
            margin-inline: 0;
        }

        :scope::-webkit-scrollbar,
        :scope *::-webkit-scrollbar {
            width: var(--sv-scrollbar-width-small);
            height: var(--sv-scrollbar-height-small);
        }
    }
}