.header {
  padding: 2rem;

  .header-container {
    max-width: $width-wide;

    width: 100%;
    margin: 0 auto;

    display: flex;
    justify-content: space-between;
    align-items: center;

    a {
      text-decoration: none;
      color: inherit;
    }

    a:hover {
      color: var(--text-900);
    }

    .site-title {
      font-size: 1.5rem;
      font-weight: 500;
    }

    .nav {
      ul {
        display: flex;
        gap: 2.5rem;
        margin: 0;
        padding: 0;
        list-style: none;

        li {
          font-size: 0.85rem;
        }
      }
    }

    .nav-toggle {
      display: none;
    }

    .nav-toggle-label {
      display: none;
    }
  }
}

@media (max-width: $width-mobile) {
  $nav-toggle-label-height: 0.75rem;
  $nav-toggle-label-width: 1.5rem;
  $nav-toggle-span-height: 0.125rem;

  .header {
    padding: 1rem;

    .header-container {
      .site-title {
        z-index: 2;
      }

      .nav {
        z-index: 1;
        position: fixed;
        inset: 0;

        display: flex;
        flex-direction: column;
        justify-content: center;

        opacity: 0;
        background: var(--background);
        transition: opacity 0.3s ease;

        pointer-events: none;

        ul {
          flex-direction: column;
          align-items: center;
          gap: 2rem;

          li a {
            font-size: 1.25rem;
          }
        }
      }

      .nav-toggle-label {
        z-index: 2;

        display: flex;
        flex-direction: column;
        justify-content: space-between;

        width: $nav-toggle-label-width;
        height: $nav-toggle-label-height;
        cursor: pointer;

        span {
          display: block;
          height: $nav-toggle-span-height;
          width: 100%;
          border-radius: 1px;
          background: currentColor;
          transition:
            transform 0.3s ease,
            opacity 0.3s ease;
        }
      }

      .nav-toggle:checked + .nav-toggle-label + .nav {
        opacity: 1;
        pointer-events: auto;
      }

      $translate-distance: (
          $nav-toggle-label-height - $nav-toggle-span-height
        ) /
        2;

      .nav-toggle:checked + .nav-toggle-label span:nth-child(1) {
        transform: translateY($translate-distance) rotate(45deg);
      }

      .nav-toggle:checked + .nav-toggle-label span:nth-child(2) {
        transform: translateY(-$translate-distance) rotate(-45deg);
      }
    }
  }
}