:root {
  --_outline-width: var(--size-1);
  --_shadow-width: var(--size-px-1);
  --_dark-color: var(--gray-3);
  --_shadow-color: var(--gray-4);
  --_color: var(--gray-5);
  --_active-color: var(--gray-6);
  --_text-color: var(--gray-12);
}

.error {
  --_dark-color: var(--red-1);
  --_shadow-color: var(--red-3);
  --_color: var(--red-6);
  --_active-color: var(--red-7);
  --_text-color: var(--red-12);
}

.warning {
  --_dark-color: var(--orange-1);
  --_shadow-color: var(--orange-3);
  --_color: var(--orange-6);
  --_active-color: var(--orange-7);
  --_text-color: var(--orange-1);
}

.success {
  --_dark-color: var(--green-1);
  --_shadow-color: var(--green-3);
  --_color: var(--green-6);
  --_active-color: var(--green-7);
  --_text-color: var(--green-1);
}

.info {
  --_dark-color: var(--blue-1);
  --_shadow-color: var(--blue-3);
  --_color: var(--blue-6);
  --_active-color: var(--blue-7);
  --_text-color: var(--blue-1);
}

html,
body {
  background: var(--gray-1);
}

main {
  padding-top: 58px;
}

p.callout {
  color: var(--_text-color);
  background-color: var(--_active-color);
  border: var(--border-size-1) solid var(--_dark-color);
  box-shadow: inset calc(-1 * var(--_shadow-width))
    calc(-1 * var(--_shadow-width)) 0 0 var(--_shadow-color);
  font-size: var(--font-size-1);
  padding: var(--size-2) var(--size-4) var(--size-3);
  border-radius: var(--radius-2);
  font-family: var(--font-pixel);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: auto;

  &.success {
    color: var(--green-10);
    background-color: var(--green-2);
    border: var(--border-size-1) solid var(--green-4);
  }

  &.error {
    color: var(--red-10);
    background-color: var(--red-2);
    border: var(--border-size-1) solid var(--red-4);
  }
}

p.info {
  color: var(--gray-10);
  font-size: var(--font-size-1);
}

button,
a.button {
  display: inline-flex;
  position: relative;
  align-self: flex-start;
  text-decoration: none;
  text-transform: uppercase;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--font-size-2);
  font-family: var(--font-pixel);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: auto;
  padding: var(--size-2) var(--size-4)
    calc(var(--size-2) + var(--_shadow-width));
  background-color: var(--_color);
  color: var(--_text-color);
  box-shadow: inset calc(-1 * var(--_shadow-width))
    calc(-1 * var(--_shadow-width)) 0 0 var(--_shadow-color);

  &.small {
    font-size: var(--font-size-1);
    padding: var(--size-1) var(--size-2)
      calc(var(--size-1) + var(--_shadow-width));

    &:active:not(&:disabled, &[aria-disabled="true"]) {
      padding: calc(var(--size-1) + var(--_shadow-width))
        calc(var(--size-2) - var(--_shadow-width)) var(--size-1)
        calc(var(--size-2) + var(--_shadow-width));
    }
  }

  &.large {
    font-size: var(--font-size-3);
    padding: var(--size-2) var(--size-6)
      calc(var(--size-2) + var(--_shadow-width));

    &:active:not(&:disabled, &[aria-disabled="true"]) {
      padding: calc(var(--size-2) + var(--_shadow-width))
        calc(var(--size-6) - var(--_shadow-width)) var(--size-2)
        calc(var(--size-6) + var(--_shadow-width));
    }
  }

  &.wide {
    width: 100%;
  }

  &:hover:not(&:disabled, &[aria-disabled="true"]) {
    color: var(--_text-color);
    background-color: var(--_active-color);
  }

  &:active:not(&:disabled, &[aria-disabled="true"]) {
    box-shadow: inset var(--_shadow-width) var(--_shadow-width) 0 0
      var(--_shadow-color);
    padding: calc(var(--size-2) + var(--_shadow-width))
      calc(var(--size-4) - var(--_shadow-width)) var(--size-2)
      calc(var(--size-4) + var(--_shadow-width));
  }

  &::before,
  &::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: content-box;
  }

  &::before {
    top: calc(-1 * var(--_outline-width));
    left: 0;
    border-top: var(--_outline-width) var(--_dark-color) solid;
    border-bottom: var(--_outline-width) var(--_dark-color) solid;
  }

  &::after {
    top: 0;
    left: calc(-1 * var(--_outline-width));
    border-left: var(--_outline-width) var(--_dark-color) solid;
    border-right: var(--_outline-width) var(--_dark-color) solid;
  }

  &:disabled,
  &[aria-disabled="true"] {
    background-color: var(--gray-4);
    color: var(--gray-8);
    box-shadow: inset calc(-1 * var(--_shadow-width))
      calc(-1 * var(--_shadow-width)) 0 0 var(--gray-3);
    cursor: not-allowed;

    &::before {
      border-top: var(--_outline-width) var(--gray-2) solid;
      border-bottom: var(--_outline-width) var(--gray-2) solid;
    }

    &::after {
      border-left: var(--_outline-width) var(--gray-2) solid;
      border-right: var(--_outline-width) var(--gray-2) solid;
    }
  }

  iconify-icon {
    margin-top: 3px;
  }
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: var(--_shadow-color);
  cursor: pointer;
  position: relative;
  width: 100%;
  margin: var(--size-1);

  &::-webkit-slider-runnable-track {
    /* background: var(--_dark-color); */
    background: transparent;
    height: var(--size-2);
  }

  &::before,
  &::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: content-box;
  }

  &::before {
    top: calc(-1 * var(--_outline-width));
    left: 0;
    border-top: var(--_outline-width) var(--_dark-color) solid;
    border-bottom: var(--_outline-width) var(--_dark-color) solid;
  }

  &::after {
    top: 0;
    left: calc(-1 * var(--_outline-width));
    border-left: var(--_outline-width) var(--_dark-color) solid;
    border-right: var(--_outline-width) var(--_dark-color) solid;
  }

  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: var(--_active-color);
    height: var(--size-4);
    width: var(--size-4);
    margin-top: calc(-1 * var(--size-1));
    box-shadow: inset calc(-1 * var(--_shadow-width))
      calc(-1 * var(--_shadow-width)) 0 0 var(--_color);
  }

  &::-webkit-slider-thumb:hover {
    box-shadow: inset calc(1 * var(--_shadow-width))
      calc(1 * var(--_shadow-width)) 0 0 var(--_color);
    color: var(--_text-color);
  }

  &::-moz-range-track {
    background: var(--_text-color);
    height: var(--size-2);
  }

  &::-moz-range-thumb {
    background: var(--green-2);
    height: var(--size-4);
    width: var(--size-4);
    margin-top: calc(-1 * var(--size-1));
    box-shadow: inset calc(-1 * var(--_shadow-width))
      calc(-1 * var(--_shadow-width)) 0 0 var(--_shadow-color);
  }

  &::-moz-range-thumb:hover {
    box-shadow: inset calc(1 * var(--_shadow-width))
      calc(1 * var(--_shadow-width)) 0 0 var(--_shadow-color);
    color: var(--_text-color);
  }
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"] {
  display: block;
  padding: var(--size-2) var(--size-4);
  font-size: var(--font-size-2);
  font-family: var(--font-sans);
  color: var(--gray-12);
  background-color: var(--gray-1);
  border-radius: 0;
  border: var(--border-size-1) solid var(--gray-4);

  &:focus {
    outline: none;
    color: var(--gray-12);
    background-color: var(--gray-2);
    border: var(--border-size-1) solid var(--gray-6);
  }

  &::placeholder {
    color: var(--gray-9);
  }

  &[aria-invalid="true"] {
    border: var(--border-size-2) solid var(--red-4);
  }
}

input[type="checkbox"],
input[type="radio"] {
  display: inline-block;
  width: var(--size-4);
  height: var(--size-4);
  margin: 0 var(--size-2);
  vertical-align: middle;
  appearance: none;
  background-color: var(--gray-1);
  border-radius: 0;
  border: var(--border-size-1) solid var(--gray-4);

  &:checked {
    background-color: var(--orange-5);
    accent-color: var(--orange-1);
  }

  &:focus {
    outline: none;
  }
}

select {
  display: block;
  padding: var(--size-2) var(--size-4);
  font-size: var(--font-size-2);
  font-family: var(--font-sans);
  color: var(--gray-12);
  background-color: var(--gray-1);
  border-radius: var(--radius-2);
  border: var(--border-size-1) solid var(--gray-4);
  box-shadow: inset 0 calc(-1 * var(--_shadow-width)) 0 0 var(--_shadow-color),
    var(--_shadow-width) 0 0 0 var(--_shadow-color);
    

  &:focus {
    outline: none;
    box-shadow: inset calc(1 * var(--_shadow-width))
      calc(1 * var(--_shadow-width)) 0 0 var(--_shadow-color);
    color: var(--gray-12);
    background-color: var(--gray-2);
  }

  &[aria-invalid="true"] {
    border: var(--border-size-2) solid var(--red-4);
  }
}

table {
  width: 100%;
  border-radius: 0;
}

th {
  border-radius: 0;
  font-family: var(--font-pixel);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: auto;
  font-size: var(--font-size-1);
  font-weight: bold;
  color: var(--orange-5);
}

tbody {
  font-family: var(--font-mono);
}

fieldset {
  border-radius: 0;
  border-color: var(--gray-4);
}

a {
  text-decoration: underline;
  color: var(--blue-6);

  &:hover {
    color: var(--blue-7);
  }

  &:has(code) {
    text-decoration: none !important;
  }
}

header.top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--size-4);
  container-type: inline-size;
  color: var(--blue-8);
  border-bottom: var(--border-size-2) solid var(--orange-1);
  box-shadow: var(--shadow-3);
  position: fixed;
  width: 100%;
  max-width: 100vw;
  height: fit-content;
  top: 0;
  z-index: var(--z-index-5);
  background: linear-gradient(to top, var(--gray-1) 0%, var(--gray-3) 50%);
  padding: var(--size-2) var(--size-4);
  box-sizing: border-box;

  .hamburger {
    display: none;
    align-items: center;

    &:hover {
      background-color: var(--_color) !important;
    }
  }

  nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-2);
    font-size: var(--font-size-1);

    @media (max-width: 640px) {
      gap: var(--size-0);
    }

    .dropdown {
      cursor: pointer;
      display: flex;
      position: relative;

      &.open, &:hover {
        background-color: var(--gray-5);
        color: var(--gray-12);

        .content {
          visibility: visible;
        }
      }

      > a {
        cursor: default;
      }

      .content {
        position: absolute;
        visibility: hidden;
        top: 0;
        right: 0;
        margin-top: 36px;
        min-width: var(--size-9);
        background-color: var(--blue-1);
        box-shadow: var(--shadow-3);
        z-index: var(--z-index-2);

        a {
          display: block;

          &.dropdownable {
            display: none;
          }

          &:hover {
            background-color: var(--blue-5);
            color: var(--blue-1);
          }

          &.highlighted {
            background-color: var(--orange-1);
            color: var(--orange-5);

            &:hover {
              background-color: var(--orange-6);
              color: var(--orange-2);
            }
          }
        }
      }
    }
  }

  kbd {
    display: flex;
    align-items: center;
    gap: var(--size-1);
    margin-right: var(--size-0);
    padding: var(--size-0) var(--size-2);
    border-color: var(--gray-6);

    > span {
      display: flex;
      gap: var(--size-1);

      @media (max-width: 640px) {
        display: none;
      }
    }

    iconify-icon {
      font-size: var(--font-size-2);
    }

    @media (max-width: 480px) {
      padding: var(--size-0) var(--size-1);
    }
  }

  a {
    text-decoration: none;
    padding: 1px var(--size-2) 2px;
    font-family: var(--font-pixel);
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: auto;
    font-size: var(--font-size-2);

    @media (max-width: 420px) {
      padding: 1px var(--size-1) 2px;
    }

    &:hover {
      background-color: var(--blue-5);
      color: var(--blue-1);
    }

    &.home {
      display: flex;
      align-items: center;
      gap: var(--size-2);
      font-family: var(--font-brand);
      font-size: var(--font-size-3);
      font-weight: bold;
      text-transform: uppercase;
      color: var(--orange-5);
      line-height: var(--font-lineheight-0);
      padding: 0 var(--size-2);

      img {
        width: 30px;
      }

      &[href] {
        img {
          width: 26px;
        }
      }
      .pro {
        color: var(--gray-9);
      }

      &:hover {
        background-color: initial;
        color: var(--orange-5);
      }
    }

    &.highlighted {
      color: var(--orange-5);

      &:hover {
        background-color: var(--orange-5);
        color: var(--orange-1);
      }
    }

    &.avatar {
      display: flex;
      align-items: center;

      img {
        width: var(--size-7);
        aspect-ratio: 1;
        border-radius: 50%;
        border: var(--border-size-1) solid var(--orange-4);
      }

      &:has(img) {
        &:hover {
          background-color: initial;
        }
      }
    }
  }

  .socials {
    display: flex;
    align-items: center;

    a {
      display: flex;
      padding: var(--size-1);
      font-size: var(--font-size-2);

      @media (max-width: 480px) {
        padding: var(--size-1) calc(var(--size-1) - var(--size-0));
      }
    }
  }

  iconify-icon {
    width: 20px;
    height: 20px;
  }

  #search-modal {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    font-size: var(--font-size-3);
    color: var(--gray-10);

    .backdrop {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100vh;
      background: var(--gray-1);
      opacity: 0.75;
    }

    .modal {
      position: absolute;
      background: var(--gray-6);
      opacity: 1;
      padding: var(--size-4);
      border: var(--border-size-2) solid var(--gray-4);
      box-shadow: var(--shadow-3);
      z-index: 100;
      top: 10vh;
      left: 50%;
      transform: translateX(-50%);
      width: 80%;
      max-width: var(--size-20);
      display: flex;
      flex-direction: column;
      gap: var(--size-2);
      max-height: 75vh;
      box-sizing: border-box;
      overflow: hidden;

      @media (max-width: 640px) {
        width: 100%;
      }

      label {
        display: flex;
        align-items: center;
        gap: var(--size-3);

        iconify-icon {
          color: var(--blue-8);
          height: 28px;
        }
      }

      #searchInput {
        flex: 1;
      }

      fieldset {
        display: flex;
        align-items: center;
        width: 100%;
        background: var(--gray-2);
        border-radius: var(--radius-2);
        padding: var(--size-3);
        gap: var(--size-1);

        label {
          display: flex;
        }

        #search {
          background: none;
          outline: none;
        }
      }

      #searchResults {
        display: flex;
        flex-direction: column;
        gap: var(--size-2);
        overflow: auto;

        a {
          background: var(--gray-4);
          padding: var(--size-3) var(--size-4);
          color: var(--gray-11);
          font-family: var(--font-sans);
          text-decoration: none;

          &:hover {
            background: var(--gray-5);
          }

          .fragment {
            background-color: var(--gray-2);
            padding: var(--size-2) var(--size-3);
            font-size: var(--font-size-1);
            overflow: auto;
            margin-top: var(--size-1);

            p {
              font-size: var(--font-size-1);
            }

            strong {
              color: var(--orange-5);
            }
          }
        }
      }
    }
  }

  @media (max-width: 1280px) {
    nav > nav {
      gap: var(--size-1);

      a.dropdownable.large {
        display: none;
      }

      .dropdown .content a.dropdownable.large {
        display: block;
      }
    }
  }

  @media (max-width: 1024px) {
    .hamburger {
      display: flex;
    }

    a {
      &.home {
        font-size: var(--font-size-2);

        img {
          width: 28px;
        }

        &[href] {
          img {
            width: 24px;
          }
        }
      }
    }

    nav > nav {
      gap: var(--size-0);

      a.dropdownable.medium {
        display: none;
      }

      .dropdown .content a.dropdownable.medium {
        display: block;
      }
    }
  }

  @media (max-width: 768px) {
    nav > nav {
      gap: 0;

      a.dropdownable.small {
        display: none;
      }

      .dropdown .content a.dropdownable.small {
        display: block;
      }
    }
  }

  @media (max-width: 640px) {
    gap: var(--size-2);

    a.home span {
      display: none;
    }
  }

  @media (max-width: 480px) {
    gap: var(--size-0);
    padding: var(--size-2) var(--size-1);
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-pixel);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: auto;
  font-weight: normal;
  color: var(--orange-5);
  line-height: var(--font-lineheight-0);
}

h1 {
  font-size: var(--font-size-5);
}

h2 {
  font-size: var(--font-size-4);
}

strong {
  font-weight: bold;
  color: var(--orange-9);
}

label {
  align-items: center;
  gap: var(--size-2);
  font-family: var(--font-pixel);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: auto;
  color: var(--orange-6);
}

pre {
  background: var(--gray-4);
  margin: 0 var(--size-1);
  padding: var(--size-1) var(--size-1);
  border-radius: var(--radius-2);
  font-size: var(--font-size-1);
  max-inline-size: none;

  code {
    margin: 0;
    padding: 0;
    background: none;
  }
}

code {
  background: var(--gray-6);
  padding: 4px 6px;
  border-radius: var(--size-1);
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 17px;
  transform: translate(-1px, 0);
}

cite {
  display: block;
  font-family: var(--font-pixel);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: auto;
  font-size: var(--font-size-2);
  color: var(--orange-10);
  text-align: right;

  &:before {
    content: "— ";
  }
}

li {
  &::marker {
    font-weight: bold;
    color: var(--blue-6);
  }
}

.code-highlight-wrapper {
  position: relative;
  width: 100%;

  .copy-button-wrapper {
    position: absolute;
    top: var(--size-2);
    right: var(--size-2);

    .copy-popover {
      position: absolute;
      top: 100%;
      right: 0;
      margin-top: var(--size-1);
      background: var(--blue-8);
      color: var(--blue-1);
      padding: var(--size-0) var(--size-1);
      border-radius: var(--radius-1);
      font-size: var(--font-size-0);
      white-space: nowrap;
      pointer-events: none;
      font-family: var(--font-mono);

      &::before {
        content: "";
        position: absolute;
        bottom: 100%;
        right: var(--size-2);
        border: var(--size-1) solid transparent;
        border-bottom-color: var(--blue-8);
      }
    }
  }
}

.code-highlight {
  background: var(--gray-4);
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  display: block;
  border-radius: var(--radius-2);

  pre {
    background: var(--gray-4) !important;
    padding: var(--size-4);
    padding-right: calc(var(--size-4) + 3rem);
    /* Extra space for copy button */
    margin: 0;
    width: fit-content;
    white-space: pre;
    overflow: visible;
    box-sizing: border-box;
  }

  /* Line numbers should stay in place */
  .ln,
  .lnt {
    user-select: none;
    padding-right: var(--size-3);
    white-space: pre;
  }

  /* Ensure code content preserves spacing */
  code {
    white-space: pre;
  }
}

.console {
  font-size: var(--font-size-0);
}

.demo {
  display: flex;
  flex-direction: column;
  gap: var(--size-5);
  background-color: var(--gray-4);
  border-radius: var(--radius-2);
  padding: var(--size-5);
  margin: var(--size-5) 0;
  width: 100%;
  box-sizing: border-box;

  &:has(legend) {
    padding-bottom: var(--size-7);
  }

  > div {
    display: flex;
    flex-direction: column;
    gap: var(--size-5);
  }

  legend {
    font-family: var(--font-pixel);
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: auto;
    font-size: var(--font-size-3);
    color: var(--gray-8);
  }

  pre {
    background: var(--gray-6);
  }

  code {
    padding: var(--size-2) var(--size-4);
    font-size: var(--font-size-2);
  }

  p {
    width: auto;
  }
}

footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--size-7);
  padding: var(--size-4) var(--size-9);
  font-family: var(--font-pixel);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: auto;
  font-size: var(--font-size-1);
  color: var(--blue-6);
  background: var(--gray-4);
  container-type: inline-size;

  @media (max-width: 768px) {
    padding: var(--size-4) var(--size-2);
  }

  @media (max-width: 480px) {
    flex-direction: column;
    gap: var(--size-2);
  }

  &.internal {
    margin-left: var(--size-12);

    @media (max-width: 1024px) {
      margin-left: 0;
    }
  }

  div {
    display: flex;
    align-items: center;
    gap: var(--size-1);
  }

  a {
    text-decoration: none;
    padding: 3px var(--size-1) 4px;

    &:hover {
      background-color: var(--blue-5);
      color: var(--blue-1);
    }
  }
}

.actions {
  display: flex;
  align-items: center;
  gap: var(--size-3);
}

copy-button {
  [icon="pixelarticons:copy"] {
    display: initial;
  }

  [icon="pixelarticons:section-copy"] {
    display: none;
  }

  .copy-popover {
    display: none;
  }

  &[copied] {
    [icon="pixelarticons:copy"] {
      display: none;
    }

    [icon="pixelarticons:section-copy"] {
      display: initial;
    }

    .copy-popover {
      display: initial;
    }
  }
}

.indicator {
  opacity: 0;
  transition: opacity 300ms ease-out;
  font-size: var(--font-size-4);

  &.loading {
    opacity: 1;
    transition: opacity 300ms ease-in;
  }

  img {
    max-inline-size: none;
  }
}

/* Scollbars */

/* WebKit: Chrome, Safari */
::-webkit-scrollbar {
  width: var(--size-1);
}
::-webkit-scrollbar-thumb {
  background-color: var(--gray-6);
  border-radius: var(--radius-1);
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--gray-7);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--gray-6) transparent;
}