nav.navbar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  top: 0;
  align-items: center;
  border-bottom: 1px solid var(--color-primary);
  padding: 0.5em 1em;
  box-sizing: border-box;
  gap: 0.5em;
  position: relative;

  .cta-wrapper {
	  display: flex;
	  flex-direction: row;
    align-items: center;
  	gap: 0.5em;
  }

  .spacer {
    flex-grow: 2;
  }

  .site-title {
    margin: 0em 1em;
    font-size: 1.5em;
    font-weight: bold;
  }

  .site-title.responsive {
    display: none;
  }

  .nav-button {
    background-color: var(--color-primary);
    padding: 0.5em 1em;
    border-radius: 5px;
    color: var(--color-text);
    text-decoration: unset;
	  max-height: 40px;

    &.outline {
      background-color: unset;
      border: 1px solid var(--color-primary);
    }
  }

  a.nav-link {
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 0;
      background-color: var(--color-primary);;
      opacity: 0;
      transition: opacity 300ms, transform 300ms, height 300ms;
      transform: translate3d(0, 1em, 0);
      transform-origin: bottom;
    }

    &:hover::after,
    &:focus::after{
      opacity: 1;
      height: 0.3em;
      /*transform: translate3d(0, 0.5em, 0);*/
    }

    &.current::after {
      opacity: 1;
      height: 0.3em;
    }
  }



  /* Ripped off from https://codepen.io/alvarotrigo/pen/zYPydpB */
  .toggle-switch {
    position: relative;
    margin-right: 1em;

    input {
      position: absolute;
      display: none;
    }

    button.toggle-container {
      position: relative;
      display: block;
      width: 3.25em;
      height: 1.75em;
      background-color: transparent;
      border-radius: 0.875em;
      cursor: pointer;
      border: 1px solid var(--color-light-background);
      overflow: hidden;
      box-shadow: 0 0 0 var(--color-primary-darker-1);
      transition: box-shadow 0.3s;

      &:hover {
        box-shadow: 2px 2px 0 var(--color-primary-darker-1);
        .slider-text {
          color: var(--color-light-background)
        }
      }
    }

    label.aria {
      display: none;
    }


    .slider {
      top: 0;
      left: 0;
      position: static;
      width: 100%;
      height: 100%;
      border-radius: .5em;
      transition: 0.3s;
      pointer-events: none;

      font-size: 0.8em;
    }

    .slider::before {
      font-size: 1rem;
      content: "";
      position: absolute;
      top: .26em;
      left: .26em;
      width: .85em;
      height: .85em;
      border-radius: 50%;
      box-shadow: inset .18em -0.1em 0px 0px var(--color-light-background);
      background-color: var(--color-dark-background);
      transition: 0.3s;
    }

    .slider.preload::before {
      transition: none !important;
    }

    .slider-text {
      font-family: var(--font-mono);
      font-size: 0.8em;
      text-align: right;
      top: -.25em;
      right: 0.35em;
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: .5em;
      transition: 0.3s;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      color: var(--color-link);
      text-wrap: nowrap;

      .spacer {
        width: 1em;
      }
    }

    button[aria-pressed="true"] {
      border: 1px solid var(--color-dark-background);
    }

    button[aria-pressed="false"] ~ .slider {
      background-color: var(--color-light-background);
    }

    button[aria-pressed="true"] {
      .slider-text {
        transform: translateX(2.80em) translateY(0.2em);
        color: var(--color-primary-darker-1);
        &:hover {
          color: var(--color-dark-background);
        }
      }
    }
    .slider:has(+ button[aria-pressed="true"]) {
      &::before {
        transform: translateX(1.35em);
        background-color: var(--color-dark-background);
        box-shadow: none;
        box-sizing: border-box;
      }
    }

    .beam {
      width: 0em;
      outline: 1px solid transparent;
      transform: translateX(0);
    }
    button[aria-pressed="true"] ~ .beam {
      height: 0.06em;
      width: 0.25em;
      right: 0.55em;
      top: 0.65em;
      background-color: var(--color-dark-background);
      position: absolute;
      outline: 1px solid var(--color-light-background);
      transition: transform 0.5s, outline 0.5s;
      transition-delay: 0.4s;
    }

    #beam-1, #beam-2, #beam-3, #beam-4, #beam-5, #beam-6, #beam-7 {
      transform: rotate(0deg) translatex(0px);
    }

    --beam-offset: 0.65em;
    button[aria-pressed="true"] {
      & ~ #beam-1 {
        transform: rotate(0deg) translateX(var(--beam-offset));
      }
      & ~ #beam-2 {
        transform: rotate(45deg) translateX(var(--beam-offset));
      }
      & ~ #beam-3 {
        transform: rotate(90deg) translateX(var(--beam-offset));
      }
      & ~ #beam-4 {
        transform: rotate(135deg) translateX(var(--beam-offset));
      }
      & ~ #beam-5 {
        transform: rotate(315deg) translateX(var(--beam-offset));
      }
      & ~ #beam-6 {
        transform: rotate(225deg) translateX(var(--beam-offset));
      }
      & ~ #beam-7 {
        transform: rotate(270deg) translateX(var(--beam-offset));
      }
    }
  }
}

a.nav-link {
  color: var(--color-primary-shade-1);
  font-size: 1.1em;

  display: block;
  position: relative;

  &:hover {
    text-decoration: unset;
  }
}

nav.tabs {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  padding: 0.5em 0;
  gap: 1em;

  a.tab-link {
    padding: 0.5em 2em;
  }

  a.current {
    border-bottom: 1px solid var(--color-primary);
  }
}

body[class="dev"],
body[class="prod"] {
  nav.navbar::after {
    position: absolute;
    bottom: -2em;
    right: 1em;
    height: 2em;
    display: flex;
    align-items: center;
    padding-left: 1em;
    padding-right: 1em;
    box-sizing: border-box;
    border-bottom-left-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
    font-family: var(--font-mono);
    font-weight: bold;
    text-shadow: 2px 2px var(--color-background), -2px -2px var(--color-background), -2px 2px var(--color-background), 2px -2px var(--color-background);
    background: repeating-linear-gradient(
      -45deg,
      var(--color-background),
      var(--color-background) 5px,
      var(--color-alert) 5px,
      var(--color-alert) 7px
    );
  }
}

body[class="dev"] {
  nav.navbar::after {
    content: "DEV MODE"
  }
}

body[class="test"] {
  nav.navbar::after {
    content: "TEST MODE"
  }
}
