@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    scrollbar-color: rgb(173 173 173) transparent;
  }


  html {
    --viewkit-toolbar-height: 5.2rem;
    --viewkit-button-height: 3.6rem;
    --viewkit-toolbar-border-width: var(--viewkit-hairline);

    --color-gray: gray;
    --color-green: rgb(83 215 105);
    --color-blue: rgb(21 126 251);
    --color-red: rgb(252 49 89);

    --active-color: oklch(from var(--color-blue) l c h);

    --toolbar-border-color: oklch(from var(--color-gray) 0.85 c h);
    --toolbar-background-color: oklch(from var(--color-gray) 0.95 c h);

    --button-background-color: oklch(from var(--color-gray) l c h / 0.25);
    --button-background-color: oklch(from currentColor l c h / 0.1);

    --toolbar-border: var(--viewkit-toolbar-border-width) solid var(--toolbar-border-color);

    font-size: 62.5%;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: none;
  }

  html,
  body {
    width: 100%;
    height: 100%;
  }

  body {
    font-size: 1.6rem;
    line-height: 1.5;
  }


  button {
    appearance: none;
    border: none;
    border-radius: 100vmax;
    min-width: var(--viewkit-button-height);
    height: var(--viewkit-button-height);
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.6rem;
    color: black;
    background: transparent;

    &:not([hidden]) {
      display: flex;
    }

    &:where(:disabled) {
      color: gray;
    }

    &:where(:not(:disabled)) {
      background: var(--button-background-color);
    }

    &:not(:has(> svg)),
    &:has(> *:not(svg)) {
      padding-inline: 1.2rem;
    }


    > svg {
      aspect-ratio: 1 / 1;
      width: 2.4rem;
      height: auto;
      fill: currentColor;
    }


    > span {
      line-height: 1;
      text-box: trim-both cap alphabetic;
    }
  }


  select {
    appearance: none;
    border: none;
    border-radius: 100vmax;
    padding-inline: 1.2rem;
    height: var(--viewkit-button-height);
    color: black;
    font-size: 1.6rem;

    &[hidden] {
      display: none;
    }

    &:where(:disabled) {
      color: gray;
    }

    &:where(:not(:disabled)) {
      background: var(--button-background-color);
    }
  }


  :is([is="view"], [is="host"]) {
    &,
    & * {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
  }


  :is([purpose="sheet"]) {
    --sheet-border-radius: 2.4rem;

    &[shown] {
      transition: none;
    }
  }


  :is([purpose="heading"]) {
    font-size: 1.8rem;
    font-weight: 600;

    &:is(:has(:is([purpose="toolbar"]) ~ :is([purpose="content"])) > *) {
      padding-bottom: var(--viewkit-toolbar-border-width);
    }
  }


  :is([purpose="toolbar"], [purpose="infobar"]) {
    padding: 0.8rem;
    display: flex;
    gap: 0.8rem;
    background: var(--toolbar-background-color);

    &:is([purpose="toolbar"]) {
      min-height: var(--viewkit-toolbar-height);
    }

    &:has(~ [purpose="content"]) {
      border-bottom: var(--viewkit-toolbar-border-width) solid var(--toolbar-border-color);

      &:is([purpose="toolbar"]) {
        min-height: calc(var(--viewkit-toolbar-height) + var(--viewkit-toolbar-border-width));
      }
    }

    &:is([purpose="content"] ~ *) {
      border-top: var(--viewkit-toolbar-border-width) solid var(--toolbar-border-color);

      &:is([purpose="toolbar"]) {
        min-height: calc(var(--viewkit-toolbar-height) + var(--viewkit-toolbar-border-width));
      }
    }


    > hr {
      flex: 1 1;
      border: none;
    }
  }


  :is([purpose="tablist"]) {
    background: var(--toolbar-background-color);

    &:has(~ [purpose="tabview"]) {
      min-height: calc(var(--viewkit-toolbar-height) + var(--viewkit-toolbar-border-width));
      border-bottom: var(--toolbar-border);
    }

    &:is([purpose="tabview"] ~ *) {
      min-height: calc(var(--viewkit-toolbar-height) + var(--viewkit-toolbar-border-width));
      border-top: var(--toolbar-border);
    }
  }


  :is([purpose="tabitem"]) {
    appearance: none;
    padding-inline: 0.8rem;
    border: none;
    border-radius: 0;
    min-height: var(--viewkit-toolbar-height);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    color: black;
    font-size: 1.3rem;
    line-height: 1;
    text-box: trim-both cap alphabetic;
    background: transparent;
    -webkit-user-select: none;
    user-select: none;

    &:is([hidden]) {
      display: none;
    }

    &:is([selected]) {
      background: transparent;
      color: var(--active-color);
    }

    &:not(:is([selected])) {
      opacity: 0.75;
    }


    > svg {
      aspect-ratio: 1 / 1;
      width: 2.4rem;
      height: auto;

      &:is([selected] > *) {
        fill: currentColor;
      }
    }
  }


  :is([purpose="overlay"], .default-overlay) {
    &:is(.\@load, .\@info, .\@warning, .\@error, .\@question, .\@overlay, .default) {
      padding: 0;
      padding-top: 1.6rem;
      display: flex;
      gap: 0.8rem;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      background: white;
      color: oklch(from black 0.25 c h);

      &[hidden] {
        display: none;
      }


      :is(.spinner, svg) {
        &:has(~ .actions:not(:empty)) {
          margin-top: auto;
        }
      }

      &:has(.actions:empty) {
        padding-bottom: 1.6rem;
      }


      svg {
        aspect-ratio: 1 / 1;
        width: 4.8rem;
        height: auto;
      }


      :is(.title, .subtitle, .description, .actions) {
        padding-inline: 1.6rem;
        text-wrap: balance;

        &:empty {
          display: none;
        }
      }


      .title {
        font-size: 1.7rem;
        font-weight: 500;
        line-height: 1.3;
      }


      .subtitle {
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 1.3;
      }


      .description {
        flex-shrink: 1;
        padding-bottom: 1.5rem;
        width: 100%;
        overflow-y: auto;
        font-size: 1.5rem;
        line-height: 1.3;


        p {
          margin-top: 0.5lh;

          &:not(:empty):has(+ :empty) {
            margin-bottom: 1lh;
          }
        }
      }


      .actions {
        margin-top: auto;
        padding: 1.6rem;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.8rem;


        button {
          &:first-child:has(+ button + button) {
            margin-right: auto;
          }

          &.confirm {
            color: var(--color-blue);
          }

          &.decline {
            color: var(--color-red);
          }
        }
      }
    }

    &:is(.\@load) {
      .spinner {
        border-radius: 100vmax;
        border: 0.2rem solid oklch(from black l c h / 0.1);
        border-top-color: black;
        aspect-ratio: 1 / 1;
        width: 3.2rem;
        height: auto;
        animation: viewkit-animation-rotate 1.2s linear infinite;
      }
    }

    &:is(.\@info, .\@warning, .\@error) {
      -webkit-user-select: text;
      user-select: text;
    }
  }
}


@keyframes viewkit-animation-rotate {
  0% { rotate: 0deg }
  100% { rotate: 360deg }
}