@import url(viewkit.css);


@layer viewkit {
  *,
  *::before,
  *::after {
    flex: 0 0 auto;
  }
}


@layer viewkit-ui {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    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);
    --color-orange: rgb(252 150 49);

    --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-default-background-color: oklch(from var(--color-gray) l c h / 0.1);
    --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%;

    &:is(html[standalone][is-safari] *) {
      height: 100lvh;
    }
  }

  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;
    }

    &:not(:disabled) {
      &[kind="primary"] {
        color: var(--color-blue);
      }

      &[kind="constructive"] {
        color: var(--color-green);
      }

      &[kind="destructive"] {
        color: var(--color-red);
      }
    }


    > 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([as~="app"], [as~="view"], [as~="host"], [as~="dialog"]) {
    &,
    & * {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
  }


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

    border-top-left-radius: var(--sheet-border-radius);
    border-top-right-radius: var(--sheet-border-radius);

    &:is([placement="center"], [placement="adaptive"][centered]) {
      border-radius: var(--sheet-border-radius);
    }

    &[shown] {
      transition: none;
    }
  }


  :is([as~="dialog"]) {
    border: none;
    border-radius: 1.8rem;
    width: min(40rem, calc(100% - 3.2rem));
    max-height: calc(100% - 3.2rem);
    box-shadow:
      0 1.8rem 5rem rgb(0 0 0 / 0.2),
      0 0 var(--viewkit-hairline) 999999px var(--viewkit-semitransparent-dark-background);
    transition-duration: 0.2s;

    &[global] {
      max-height: calc(100lvh - 3.2rem);
    }

    &[hidden] {
      box-shadow:
        0 1.8rem 5rem transparent,
        0 0 var(--viewkit-hairline) 999999px transparent;
    }


    > main[as~="content"] {
      padding: 2.4rem 0.8rem;
    }

    > main[as~="content"] > svg[as~="icon"] {
      margin: 0 auto 1.6rem;
      width: 4.8rem;
      height: 4.8rem;
      display: block;
      color: var(--active-color);
    }

    > main[as~="content"] > :is(h1, h2, h3, h4, h5, h6) {
      margin: 0 1.6rem;
      font-size: 1.8rem;
      font-weight: 600;
      line-height: 1.25;
      text-align: center;
      text-wrap: balance;
    }

    > main[as~="content"] > article {
      margin: 0 1.6rem;
      font-size: 1.5rem;
      line-height: 2rem;
      text-align: center;
      text-wrap: pretty;

      p {
        margin: 0;

        + p {
          margin-top: 0.5lh;
        }

        &.list-item {
          margin-left: 2rem;
          text-align: left;

          + .list-item {
            margin-top: 0;
          }
        }
      }
    }

    &:is([align="left"], [align="justify"]) > main[as~="content"] > :is(h1, h2, h3, h4, h5, h6),
    &[align="left"] > main[as~="content"] > article {
      text-align: left;
    }

    &[align="justify"] > main[as~="content"] > article {
      text-align: justify;
    }

    > main[as~="content"] > :is(h1, h2, h3, h4, h5, h6):not([hidden]) + article {
      margin-top: 1.2rem;
    }

    .inputs {
      margin-inline: 1.6rem;
      row-gap: 1.2rem;
    }

    > main[as~="content"] > :is(svg[as~="icon"], h1, h2, h3, h4, h5, h6, article):not([hidden]) ~ .inputs:not(:empty) {
      margin-top: 1.8rem;
    }

    .dialog-input {
      > .label {
        align-self: stretch;
        border: var(--viewkit-hairline) solid var(--toolbar-border-color);
        border-right: none;
        border-radius: 100vmax 0 0 100vmax;
        padding: 0.7rem 0.8rem 0.7rem 1.6rem;
        align-content: center;
        font-size: 1.4rem;
        font-weight: 600;
        line-height: 2rem;
        text-align: right;
        background: var(--toolbar-background-color);
      }

      .control {
        border: var(--viewkit-hairline) solid var(--toolbar-border-color);
        border-radius: 0 100vmax 100vmax 0;
        padding-inline: 0.8rem 1.6rem;
        min-height: var(--viewkit-button-height);
        background: white;

        > svg {
          width: 2rem;
          height: 2rem;
          color: var(--color-gray);
        }
      }

      &:not(:has(> .label)) > .control {
        border-radius: 100vmax;
        padding-inline: 1.6rem;
      }

      :is(input, select, textarea) {
        appearance: none;
        border: none;
        padding-block: 0.7rem;
        color: black;
        font: inherit;
        line-height: 2rem;
        background: transparent;
        outline: none;
      }
    }
  }


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

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


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

    &:is(html[standalone] *) {
      padding-left: calc(0.8rem + env(safe-area-inset-left));
      padding-right: calc(0.8rem + env(safe-area-inset-right));
    }

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

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

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

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

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


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


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

    &:is(html[standalone] *) {
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
    }

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

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


  :is([as~="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;
    }

    &:is([as~="tabview"] ~ [as~="tablist"] *) {
      height: calc(var(--viewkit-toolbar-height) + env(safe-area-inset-bottom));
      padding-bottom: env(safe-area-inset-bottom);
    }


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

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


  :is([as~="overlay"], .default-overlay) {
    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([as~="spinner"], svg, h1, h2, h3, h4, h5, h6):first-child: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(h1, h2, h3, h4, h5, h6, .subtitle, .description, .actions) {
      padding-inline: 1.6rem;
      text-wrap: balance;

      &:empty {
        display: none;
      }
    }


    :is(h1, h2, h3, h4, h5, h6) {
      font-size: 1.7rem;
      font-weight: 500;
      line-height: 1.3;
    }


    .subtitle:not(:is(h1, h2, h3, h4, h5, h6)) {
      font-size: 1.6rem;
      font-weight: 400;
      line-height: 1.3;
    }


    .description:not(:is(h1, h2, h3, h4, h5, h6)) {
      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;

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

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

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

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

    [as~="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([data-viewkit-overlay="info"], [data-viewkit-overlay="warning"], [data-viewkit-overlay="error"]) {
      -webkit-user-select: text;
      user-select: text;
    }
  }
}


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