.header {

  display: flex;
  flex-direction: column;
  padding: 0.8em;

  nav {

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

    div {

      align-items: center;
      display: flex;
      gap: 0.35em;
      z-index: 102;

      a.logo {
        color: var(--color-grey);
        font-size: var(--font-size-x-large);
        font-weight: 900;
        letter-spacing: -0.02em;
        line-height: 1em;
        padding: 0.125em 0 0 0;
        text-decoration: none;
      }

      a.release {
        background: var(--color-base-darker);
        border-radius: 1.1em;
        color: var(--color-grey);
        display: flex;
        font-family: var(--font-family-mono);
        font-size: 35%;
        font-weight: 400;
        letter-spacing: normal;
        line-height: 1em;
        padding: 0.6em 0.9em;
        text-decoration: none;
      }

    }

    ul {

      align-items: center;
      display: none;
      font-size: var(--font-size-x-small);
      list-style: none;
      padding: 0;

      > li {

        display: flex;
        font-size: 80%;
        justify-content: center;
        letter-spacing: -0.01em;
        margin: 0;
        position: relative;

        > a {

          align-items: center;
          border-radius: 2.5em;
          color: var(--color-blue);
          display: flex;
          gap: 0.6em;
          letter-spacing: -0.01em;
          line-height: 1em;
          margin-bottom: 0.5em;
          margin-top: 0.5em;
          padding: 0.9em 1.3em 0.75em 1.3em;
          text-align: center;
          text-decoration: none;

          svg {
            height: 0.75em;
            width: 0.75em;
          }

        }

        ol {

          background: var(--color-white);
          border-radius: 0.6em;
          box-shadow:
            0 0 0 1px rgba(var(--rgb-black), 0.075),
            0 10px 30px -15px rgba(var(--rgb-black), 0.125),
            0 20px 20px -30px rgba(var(--rgb-black), 0.125)
          ;
          display: none;
          gap: 0.3em;
          list-style: none;
          margin: 0;
          opacity: 0;
          padding: 0.5em;
          position: absolute;
          top: 100%;
          visibility: hidden;
          z-index: 1;

          li {

            margin: 0;

            a {
              border-radius: 0.3em;
              color: var(--color-grey);
              display: flex;
              padding: 0.55em 0.8em 0.45em 0.8em;
              text-align: center;
              text-decoration: none;
              white-space: nowrap;
            }

            &.selected a {
              background: var(--color-blue);
              color: var(--color-white);
            }

          }

        }

        &:last-child {
          margin-right: -1.3em;
        }

      }

    }

  }

  @media(hover: hover) {

    nav {

      div {

        a.logo {

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

        }

        a.release {

          transition:
            background var(--transition),
            color var(--transition)
          ;

          &:focus,
          &:hover {
            background: var(--color-blue);
            color: var(--color-white);
          }

        }

      }

      ul > li {

        > a {

          transition:
            background var(--transition),
            color var(--transition)
          ;

          &:focus,
          &:hover {
            background: var(--color-base-darker);
            color: var(--color-grey);
          }

        }

        ol li:not(.selected) a {

          transition: background var(--transition);

          &:focus,
          &:hover {
            background: var(--color-base-dark);
          }

        }

        &:focus,
        &:hover {

          > a {
            background: var(--color-base-darker);
            color: var(--color-grey);
          }

          ol {
            animation: dropdown var(--transition-slow);
            display: flex;
            flex-direction: column;
            opacity: 1;
            visibility: visible;
          }

        }

      }

    }

  }

  @media(min-width: 64em) {

    padding-left: var(--space-large);
    padding-right: var(--space-large);

    nav ul {
      display: flex;
    }

  }

}

@keyframes dropdown {

  0% {
    opacity: 0;
    transform: translateY(-0.3em);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}
