html {
  &[data-theme="light"] {
    header {
      .container {
        nav {
          ul {
            a.pro {
              box-shadow: inset 0 -0.0625rem 0
                hsla(var(--main-hue), 0%, 0%, 0.1);

              &::before {
                background: linear-gradient(
                  114deg,
                  hsla(var(--main-hue), 0%, 0%, 0),
                  hsla(var(--main-hue), 0%, 0%, 0.1) 42%,
                  hsla(var(--main-hue), 0%, 0%, 0.1) 60%,
                  hsla(var(--main-hue), 0%, 0%, 0)
                );
              }
            }
          }
        }
      }
    }

    .command-bar-dialog {
      border: 0.0313rem solid var(--background-color-tertiary);

      a {
        background-color: var(--background-color-primary);
      }
    }
  }
}

header {
  z-index: 6;
  position: sticky;
  top: 0;
  border-bottom: 0.0313rem solid var(--background-color-tertiary);
  background-color: var(--background-color-primary);

  .container {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;

    .wrapper {
      display: flex;
      position: relative;
      flex-grow: 1;
      flex-shrink: 0;
      flex-basis: 0;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
    }

    .logo {
      color: var(--color-display);
      font-weight: 700;
      font-size: 0.875rem;

      span {
        margin-left: 0.1875rem;
        padding: 0.1875rem 0.375rem;
        border-radius: 0.1875rem;
        background-image: linear-gradient(
          -45deg,
          var(--cyan),
          var(--green),
          var(--orange),
          var(--pink),
          var(--purple),
          var(--red),
          var(--yellow)
        );
        background-size: 400% 400%;
        color: var(--background-color-primary);
        animation: gradient-shift 6000ms var(--ease-fluid) infinite;
      }
    }

    .command-bar {
      position: relative;
      flex-grow: 1;
      flex-shrink: 0;
      flex-basis: 0;
      min-height: 2.25rem;
      padding: 0;
      border: none;
      border-radius: 0.375rem;
      outline-color: transparent;
      outline-style: solid;
      outline-width: 0;
      background-color: var(--background-color-secondary);
      transition:
        outline-color 240ms var(--ease-fluid),
        outline-width 180ms var(--ease-fluid),
        color 240ms var(--ease-fluid);

      &:focus-visible,
      &:hover {
        outline-color: var(--background-color-tertiary);
        outline-width: 0.125rem;

        .icon {
          transform: rotate(-6deg) translateY(-50%);
          color: var(--color-display);
        }
      }

      .search {
        display: flex;
        flex-grow: 1;
        flex-shrink: 0;
        flex-basis: 0;
        align-items: center;
        padding: 0.75rem 0.75rem 0.75rem 2.5em;
        line-height: 1;

        .icon {
          z-index: 2;
          position: absolute;
          top: 50%;
          left: 1em;
          transform: translateY(-50%);
          transform-origin: center;
          transition:
            transform 240ms var(--ease-elastic),
            color 240ms var(--ease-fluid);
        }

        .shortcut {
          display: inline-flex;
          align-items: center;
          margin-left: auto;
          gap: 0.125rem;

          kbd {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            aspect-ratio: 1 / 1;
            padding: 0.125rem 0.25rem;
            border: 0.0313rem solid var(--background-color-primary);
            border-radius: 0.25rem;
            background-color: var(--background-color-tertiary);
            color: var(--color-display);
            font-family: var(--font-mono);
          }
        }
      }
    }

    .mb-trigger {
      display: none;
      visibility: hidden;
    }

    nav {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: fit-content;

      ul {
        display: flex;
        align-items: center;
        justify-content: center;
        width: fit-content;
        margin: 0;
        padding: 0;
        gap: 0.75rem;
        list-style: none;

        li {
          position: relative;
        }

        a,
        button {
          .icon {
            transition:
              stroke 120ms var(--ease-fluid),
              fill 120ms var(--ease-fluid);
          }

          &.active {
            color: var(--color);

            .icon {
              fill: currentColor;
            }

            &.blog {
              .icon {
                path {
                  &:nth-of-type(2) {
                    stroke: var(--background-color-secondary);
                  }
                }
              }
            }
          }

          &.radio {
            .visualizer {
              display: flex;
              position: relative;
              justify-content: space-between;
              width: 0.75rem;
              height: 0.75rem;

              span {
                width: 0.125rem;
                height: 100%;
                transform-origin: bottom;
                border-radius: 0.125rem;
                background-color: var(--color);
                content: "";
                animation: bounce 2202ms ease infinite alternate;
                opacity: 1;
                transition: opacity 162ms var(--ease-fluid);

                &:nth-of-type(2) {
                  animation-delay: -2202ms;
                }

                &:nth-of-type(3) {
                  animation-delay: -3702ms;
                }
              }
            }
          }

          &.pro {
            box-shadow: inset 0 0.0625rem 0 hsla(var(--main-hue), 0%, 100%, 0.1);

            &::before {
              position: absolute;
              top: 0;
              left: 0;
              width: 200%;
              height: 100%;
              transform: translateX(-198%);
              background: linear-gradient(
                114deg,
                hsla(var(--main-hue), 0%, 100%, 0),
                hsla(var(--main-hue), 0%, 100%, 0.1) 42%,
                hsla(var(--main-hue), 0%, 100%, 0.1) 60%,
                hsla(var(--main-hue), 0%, 100%, 0)
              );
              content: "";
              animation: shine 6000ms var(--ease-fluid) infinite 504ms;
              filter: blur(0.375rem);
              pointer-events: none;
            }
          }
        }
      }
    }
  }

  @media (max-width: 70rem) {
    .container {
      flex-direction: column;
      padding: 0;

      .wrapper {
        z-index: 2;
        width: 100%;
        padding: var(--page-padding-vertical) var(--page-padding-horizontal);
        background-color: var(--background-color-primary);
      }

      .command-bar,
      .command-bar-dialog {
        display: none;
        visibility: hidden;
        pointer-events: none;
      }

      .mb-trigger {
        display: flex;
        visibility: visible;
      }

      nav {
        z-index: 1;
        position: absolute;
        top: 100%;
        width: 100%;
        padding: var(--page-padding-vertical) var(--page-padding-horizontal)
          calc(var(--page-padding-vertical) + 0.375rem);
        transform: translateY(-200%);
        border-top: 0.0313rem solid var(--background-color-tertiary);
        background-color: var(--background-color-primary);
        opacity: 0;
        transition:
          transform 420ms var(--ease-fluid),
          opacity 300ms var(--ease-fluid);

        &.active {
          transform: translateY(0);
          opacity: 1;
        }

        ul {
          flex-direction: column;
          width: 100%;

          li {
            width: 100%;

            a,
            button {
              justify-content: start;
              width: 100%;
              border: 0.0313rem solid var(--background-color-tertiary);

              &.radio {
                transform: none;
                border-width: 0.0625rem;
                border-radius: 0.375rem 0.375rem 0 0;
                outline: none;
              }
            }
          }
        }
      }
    }
  }
}

.command-bar-dialog {
  visibility: hidden;
  flex-direction: column;
  width: 100%;
  max-width: 30rem;
  max-height: 42vh;
  padding: 1.5rem;
  overflow-y: scroll;
  gap: 1.5rem;
  transform: translateY(0.75rem);
  border: 0.0313rem solid var(--background-color-tertiary);
  border-radius: 0.75rem;
  background-color: var(--background-color-secondary);
  color: inherit;
  opacity: 0;
  transition:
    transform 162ms var(--ease-fluid),
    opacity 162ms var(--ease-fluid);

  &::backdrop {
    visibility: hidden;
    background-color: var(--background-color-overlay);
    opacity: 0;
    transition: opacity 162ms var(--ease-fluid);
  }

  &[open],
  &::backdrop {
    display: flex;
    visibility: visible;
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .search {
    display: flex;
    position: relative;
    align-items: center;
    width: 100%;

    input {
      width: 100%;
      min-height: 2.25rem;
      padding: 0.75rem 0.75rem 0.75rem 2.5em;
      border: none;
      border-radius: 0.5rem;
      outline-color: transparent;
      outline-style: solid;
      outline-width: 0;
      background-color: var(--background-color-primary);
      line-height: 1;
      transition:
        outline-color 240ms var(--ease-fluid),
        outline-width 180ms var(--ease-fluid),
        color 240ms var(--ease-fluid),
        background-color 240ms var(--ease-fluid);

      &:focus-visible,
      &:hover {
        outline-color: var(--background-color-tertiary);
        outline-width: 0.125rem;

        ~ .icon {
          transform: rotate(-6deg) translateY(-50%);
          color: var(--color-display);
        }
      }
    }

    .icon {
      z-index: 2;
      position: absolute;
      top: 50%;
      left: 1em;
      transform: translateY(-50%);
      transform-origin: center;
      transition:
        transform 240ms var(--ease-elastic),
        color 240ms var(--ease-fluid);
    }
  }

  ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
    gap: 1.125rem;
    line-height: 1.8;
    list-style: none;

    li {
      display: flex;
      flex-direction: column;
      width: 100%;

      ul {
        gap: 0.75rem;
      }

      .title {
        padding: 0 0.375rem 0.5em;
        color: var(--color-display);
        font-size: var(--font-size-body);
      }

      a {
        display: inline-flex;
        align-items: center;
        width: 100%;
        padding: 0.375rem 0.75rem;
        gap: 0.75em;
        border: 0.0625rem solid var(--background-color-tertiary);
        border-radius: 0.375rem;
        background-color: var(--background-color-tertiary);
        color: var(--color-heading);
        text-decoration: none;
        transition:
          background-color 240ms var(--ease-fluid),
          color 240ms var(--ease-fluid);

        &:focus-visible,
        &:hover {
          background-color: var(--background-color-secondary);
          color: var(--color-display);
        }
      }

      p {
        width: 100%;
        padding: 0 0.375rem;
      }

      .icon {
        position: relative;

        &.app {
          width: 1.5em;
          height: 1.5em;
          overflow: hidden;
          border-radius: 100%;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
          }
        }
      }
    }
  }
}

@keyframes bounce {
  10% {
    transform: scaleY(0.3);
  }
  30% {
    transform: scaleY(1);
  }
  60% {
    transform: scaleY(0.5);
  }
  80% {
    transform: scaleY(0.75);
  }
  100% {
    transform: scaleY(0.6);
  }
}

@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes shine {
  0% {
    transform: translateX(-198%);
  }
  50% {
    transform: translateX(198%);
  }
  100% {
    transform: translateX(198%);
  }
}
