.pill-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  font-size: 1rem;
  justify-content: center;

  li {
    --border-radius: 1rem;
    --shadow-size: 0.18rem;

    margin: 0;
    padding: 0;
    background: var(--color-bg-lightest);
    box-shadow: 0 0.04rem var(--shadow-size) hsl(0, 0%, 78%);

    &:first-child {
      border-radius: var(--border-radius) 0 0 var(--border-radius);
    }

    &:last-child {
      border-radius: 0 var(--border-radius) var(--border-radius) 0;
    }

    &.current {
      --shadow-size: 0.09rem;

      background: var(--color-bg-lighter);
      
      a {
        color: var(--color-fg-lightest);
      }
    }
  }

  a {
    text-decoration: none;
    color: currentColor;
    display: block;
    padding: 0.35rem 0.85rem;
  }
}