@layer viewkit {
  @keyframes viewkit-fade-in {
    from { opacity: 0 }
    to   { opacity: 1 }
  }

  :root {
    --viewkit-transition-duration: 0.4s;
    --viewkit-semitransparent-factor: 0.333;
    --viewkit-light-background: rgb(255, 255, 255);
    --viewkit-dark-background: rgb(0, 0, 0);
    --viewkit-semitransparent-dark-background: rgba(0, 0, 0, var(--viewkit-semitransparent-factor));
    --viewkit-semitransparent-dark-border-border: rgba(0, 0, 0, 0.1);
    --viewkit-hairline: 1px;
  }


  html:has(> :is(body[is="view"], body[is="host"])) {
    &,
    > body {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      width: 100lvw;
      height: 100lvh;
    }
  }


  *:has(> :is([is="view"], [is="host"])) {
    box-sizing: border-box;
    overflow: clip;


    > :is([is="view"], [is="host"]) {
      position: relative;
      min-width: 0;
      min-height: 0;
      max-height: 100lvh;
      display: block;
      background: var(--viewkit-light-background);
      isolation: isolate;
      overflow: clip;

      &:has(> :is([is="view"], [is="host"])) {
        display: grid;
      }

      &:has(> :is([purpose="toolbar"], [purpose="infobar"], [purpose="sidebar"], [purpose="content"], [purpose="tabview"])) {
        display: grid;
        grid-template-columns:
          [toolbar-start sidebar-left-start]
            var(--sidebar-left-width, auto)
          [sidebar-left-end infobar-start content-start]
            minmax(0, 1fr)
          [sidebar-right-start infobar-end content-end]
            var(--sidebar-right-width, auto)
          [sidebar-right-end toolbar-end];
        grid-template-rows:
          [toolbar-top-start]
            auto
          [toolbar-top-end sidebar-start infobar-top-start]
            auto
          [infobar-top-end content-start]
            minmax(0, 1fr)
          [content-end infobar-bottom-start]
            auto
          [infobar-bottom-end sidebar-end toolbar-bottom-start]
            auto
          [toolbar-bottom-end];
      }

      &[hidden]:not([purpose="slide"], [purpose="sheet"]),
      &:not([initialized]) {
        display: none;
      }


      > :is([is="view"], [is="host"]) {
        grid-column: 1 / -1;
        grid-row: 1 / -1;
      }


      > :is([purpose="slide"], [purpose="sheet"], [purpose="heading"], [purpose="toolbar"], [purpose="infobar"], [purpose="sidebar"], [purpose="content"], [purpose="tabview"], [purpose="tablist"], [purpose="overlay"]) {
        position: relative;
      }


      &:is([purpose="slide"], [purpose="sheet"]) {
        transition-property: translate, box-shadow;
        transition-timing-function: ease-in-out;
        transition-duration: var(--viewkit-transition-duration);

        &:is([purpose="slide"]) {
          box-shadow:
            0 0 var(--viewkit-hairline) 999999px var(--viewkit-semitransparent-dark-background),
            calc(var(--viewkit-hairline) * -1) 0 0 var(--viewkit-semitransparent-dark-border-border);

          &[hidden] {
            box-shadow:
              0 0 var(--viewkit-hairline) 999999px transparent,
              calc(var(--viewkit-hairline) * -1) 0 0 var(--viewkit-semitransparent-dark-border-border);
            translate: calc(100% + var(--viewkit-hairline)) 0%;
          }
        }

        &:is([purpose="sheet"]) {
          box-shadow:
            0 0 var(--viewkit-hairline) 999999px var(--viewkit-semitransparent-dark-background),
            0 0 0 var(--viewkit-hairline) var(--viewkit-semitransparent-dark-border-border);
          justify-self: center;
          align-self: end;

          &[hidden] {
            box-shadow:
              0 0 var(--viewkit-hairline) 999999px transparent,
              0 0 0 var(--viewkit-hairline) var(--viewkit-semitransparent-dark-border-border);
            translate: 0% calc(100% + var(--viewkit-hairline));
          }
        }
      }


      > :is([purpose="heading"], [purpose="toolbar"], [purpose="infobar"], [purpose="sidebar"], [purpose="content"], [purpose="tabview"]) {
        background: var(--viewkit-light-background);
        overflow: clip;
      }

      > :is([purpose="sidebar"], [purpose="content"], [purpose="tabview"]) {
        background: var(--viewkit-light-background);
        overflow-y: auto;
        scrollbar-color: oklch(from black 0.75 c h) transparent;
      }


      > :is([purpose="heading"], [purpose="toolbar"]) {
        &:is([purpose="heading"]) {
          align-self: center;
          z-index: 1;
          text-align: center;
          background: transparent;
        }

        &:has(~ :is([purpose="content"], [purpose="tabview"])) {
          grid-column: toolbar;
          grid-row: toolbar-top;
        }

        &:is(:is([purpose="content"], [purpose="tabview"]) ~ *) {
          grid-column: toolbar;
          grid-row: toolbar-bottom;
        }
      }


      > :is([purpose="sidebar"]) {
        &:has(~ :is([purpose="content"], [purpose="tabview"])) {
          grid-column: sidebar-left;
          grid-row: sidebar;
        }

        &:is(:is([purpose="content"], [purpose="tabview"]) ~ *) {
          grid-column: sidebar-right;
          grid-row: sidebar;
        }

        &:not(:is([purpose="heading"], [purpose="toolbar"]) ~ *) {
          grid-row-start: toolbar-top;
        }

        &:not(:has(~ :is([purpose="heading"], [purpose="toolbar"]))) {
          grid-row-end: toolbar-bottom;
        }
      }


      > :is([purpose="infobar"], [purpose="tablist"]) {
        &:has(~ :is([purpose="content"], [purpose="tabview"])) {
          grid-column: infobar;
          grid-row: infobar-top;

          &:not(:is([purpose="heading"], [purpose="toolbar"]) ~ *) {
            grid-row-start: toolbar-top;
          }
        }

        &:is(:is([purpose="content"], [purpose="tabview"]) ~ *) {
          grid-column: infobar;
          grid-row: infobar-bottom;

          &:not(:has(~ :is([purpose="heading"], [purpose="toolbar"]))) {
            grid-row-end: toolbar-bottom;
          }
        }

        &:not([purpose="sidebar"] ~ *) {
          grid-column-start: sidebar-left;
        }

        &:not(:has(~ [purpose="sidebar"])) {
          grid-column-end: sidebar-right;
        }

        &:is([purpose="tablist"]) {
          display: grid;
          grid-auto-flow: column;
          grid-auto-columns: 1fr;


          > [purpose="tabitem"] {
            appearance: none;
            border: none;

            &[selected] {
              background: green;
            }
          }
        }
      }


      > :is([purpose="content"], [purpose="tabview"]) {
        grid-column: content;
        grid-row: content;

        &:not(:is([purpose="infobar"], [purpose="tablist"]) ~ *) {
          grid-row-start: infobar-top;
        }

        &:not(:is([purpose="heading"], [purpose="toolbar"]) ~ *):not(:is([purpose="infobar"], [purpose="tablist"]) ~ *) {
          grid-row-start: toolbar-top;
        }

        &:not(:has(~ :is([purpose="infobar"], [purpose="tablist"]))) {
          grid-row-end: infobar-bottom;
        }

        &:not(:has(~ :is([purpose="infobar"], [purpose="tablist"]))):not(:has(~ :is([purpose="heading"], [purpose="toolbar"]))) {
          grid-row-end: toolbar-bottom;
        }

        &:not([purpose="sidebar"] ~ *) {
          grid-column-start: sidebar-left;
        }

        &:not(:has(~ [purpose="sidebar"])) {
          grid-column-end: sidebar-right;
        }

        &:is([purpose="tabview"]) {
          &[inert] {
            visibility: hidden;
          }
        }
      }


      > :is([purpose="overlay"]) {
        grid-column: sidebar-left / sidebar-right;
        grid-row: toolbar-top / toolbar-bottom;

        &:is(:is([purpose="heading"], [purpose="toolbar"]) ~ :is([purpose="content"], [purpose="tabview"]) ~ *) {
          grid-row-start: toolbar-top-end;
        }

        &:is(:is([purpose="infobar"], [purpose="tablist"]) ~ :is([purpose="content"], [purpose="tabview"]) ~ *) {
          grid-row-start: infobar-top-end;
        }

        &:is(:is([purpose="content"], [purpose="tabview"]) ~ :is([purpose="heading"], [purpose="toolbar"]) ~ *) {
          grid-row-end: toolbar-bottom-start;
        }

        &:is(:is([purpose="content"], [purpose="tabview"]) ~ :is([purpose="infobar"], [purpose="tablist"]) ~ *) {
          grid-row-end: infobar-bottom-start;
        }

        &:is(:is([purpose="sidebar"]) ~ :is([purpose="content"], [purpose="tabview"]) ~ *) {
          grid-column-start: sidebar-left-end;
        }

        &:is(:is([purpose="content"], [purpose="tabview"]) ~ :is([purpose="sidebar"]) ~ *) {
          grid-column-end: sidebar-right-start;
        }

        &[hidden] {
          display: none;
        }
      }
    }
  }
}