@layer config, resets, components, utilities;

@layer components {
  body {
    margin-block: 5vmax;
    margin-inline: clamp(4ch, 5vmin, 20ch);

    > div {
      container-name: layout;
      container-type: inline-size;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row-reverse;
      align-items: flex-start;
      gap: 5vmin;
      row-gap: 5vmax;
      max-inline-size: 140ch;
      margin-inline: auto;
    }
  }

  header,
  section,
  search {
    display: grid;
    gap: 0.75cap;
  }

  header {
    flex: 1 1 25ch;
    padding: clamp(2ch, 2.5vmin, 4ch);
    background-color: color-mix(in oklch, canvas 75%, transparent);
    border: 2px solid color-mix(in oklch, canvastext 8%, transparent);
    border-radius: 3ex;
    border-end-start-radius: 0;
    backdrop-filter: blur(1ex);

    > *:last-child {
      margin-block-start: 2cap;
      text-align: end;
    }

    h1 {
      font-size: inherit;
      text-transform: uppercase;
      letter-spacing: 0.1ex;
    }

    p {
      max-inline-size: unset;
      text-wrap: pretty;
    }
  }

  main {
    display: grid;
    gap: 4cap;
    flex: 6.18 1 35ch;
  }

  @container layout (inline-size > calc(60ch + 5vmin)) {
    header {
      position: sticky;
      inset-block-start: 2.5vmin;
      overflow-y: auto;
      max-block-size: calc(50dvb - 5vmin);
      font-size: 0.8rem;
    }

    @media (width > 37.5rem) {
      header {
        max-block-size: calc(100dvb - 5vmin);
      }
    }
  }
  a {
    color: inherit;
    text-underline-offset: 0.25ex;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  th {
    font-weight: inherit;
    line-height: 1.15;

    &:not(:first-child) {
      margin-block-start: 1cap;
    }
  }

  h2 {
    font-size: 2rem;
  }

  p {
    max-inline-size: 65ch;
  }

  pre code {
    display: block;
    padding: 2ex;
    border: 0.5ex solid color-mix(in oklch, canvastext 8%, transparent);
    border-radius: 1ex;
  }

  code {
    font-size: 0.85em;
  }

  input,
  button {
    min-block-size: 3rem;
    min-inline-size: 3rem;
    padding-block: 1ex;
    padding-inline: 1ch;
    line-height: 1.2;
    border: 0.25ex solid;
    border-radius: 1ex;
  }

  input {
    border-color: color-mix(in oklch, canvastext 40%, transparent);
  }

  button {
    display: inline-grid;
    place-items: center;
    font-family: system-ui, sans-serif;
    font-weight: 500;
    text-align: center;
    color: canvastext;
    border-color: canvastext;
    background-color: canvas;
    transition: background-color 0.2s ease-in-out;

    &:has(mui-icon:not(:only-child)) {
      grid-template-columns: auto 1fr auto;
      gap: 0.5ch;
    }

    @media (any-hover: hover) {
      &:hover {
        background-color: color-mix(in oklch, canvastext 4%, canvas);
      }
    }
  }

  table {
    inline-size: 100%;
    border-spacing: 0.5ch;
    background-color: color-mix(in oklch, canvastext 4%, transparent);
    border: 1px solid transparent;
    border-radius: 1ex;

    th,
    td {
      text-align: start;
      padding-block: 0.5ex;
      padding-inline: 1ch;
    }

    th {
      background-color: canvas;
      border: 1px solid transparent;
      border-radius: 1ex;

      &:last-child {
        min-inline-size: 25ch;
      }

      &:not(:last-child) {
        white-space: nowrap;
      }
    }
  }

  nav {
    a {
      text-decoration: none;

      &[aria-current='page'] {
        color: canvastext;
        text-decoration: underline;
      }

      @media (any-hover: hover) {
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }

  .display-demo {
    display: flex;
    align-items: center;
    gap: 0.5ch;
    font-family: system-ui, sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1;

    mui-icon {
      transform: translateY(0.05cap);
    }
  }

  .dynamic-icon-demo {
    display: grid;
    place-items: center;
    padding: 5vmin;
    background-color: color-mix(in oklch, canvastext 4%, transparent);
    border: 1px solid transparent;
    border-radius: 1ex;

    p {
      margin-block-start: 1cap;
      font-size: 0.8em;
      text-align: center;
    }
  }

  .icons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10ch, 1fr));
    list-style: none;
    padding-block: 2.5vmin;
    background-color: color-mix(in oklch, canvastext 4%, transparent);
    border: 1px solid transparent;
    border-radius: 1ex;
  }

  .icon-demo {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding: 1ex;

    & > span {
      margin-block-start: 0.5ex;
      font-size: 0.8em;
      line-height: 1.2;
      color: canvastext;
    }
  }

  .search-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5ch;
    max-inline-size: 65ch;

    input {
      flex: 4 1 20ch;
      inline-size: 100%;
    }

    button {
      flex: 1 1 max-content;
    }
  }

  [lang='zh-hans'],
  [lang='zh-hans'] *:not(.display-demo) {
    font-family: 'Noto Serif SC', 'Georgia', serif;
  }

  :root[lang='zh-hans'] {
    font-size: clamp(90%, 90% * 0.9 + 0.5dvi, 125%);
    line-height: 1.6;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-weight: bold;
    }

    p {
      max-inline-size: 65em;
    }

    button:has(mui-icon:not(:only-child)) {
      align-items: center;
      padding-block: 1ex;
    }

    code {
      font-size: inherit;
    }
  }
}

@layer config {
  :root {
    color-scheme: dark light;
    font-family: 'IM Fell English', 'Georgia', serif;
    font-size: clamp(100%, 100% * 0.9 + 0.5dvi, 200%);
    line-height: 1.4;
  }
}

@layer resets {
  *,
  *::before,
  *::after {
    font-feature-settings: 'kern';
    font-kerning: normal;
    box-sizing: border-box;
  }

  * {
    margin: 0;
    padding: 0;
    text-wrap: balance;

    &:focus-visible {
      outline: 2px dashed linktext;
      outline-offset: 2px;
    }
  }

  input:is([type='checkbox'], [type='radio']),
  select,
  label,
  button {
    cursor: pointer;
  }

  input,
  select,
  textarea,
  button {
    font: inherit;
  }

  @media (prefers-reduced-motion: no-preference) {
    :root {
      scroll-behavior: smooth;
    }
  }
}

@layer utilities {
  .u-visually-hidden:not(:focus):not(:active) {
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .u-horizontal-scroll {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .u-flex-align-center {
    align-items: center;
  }
}