.tabButton {
  background-color: var(--np-slate-100);
  color: var(--np-slate-600);
  padding: 0 0.75rem;
  border-bottom-width: 2px;
  border-color: transparent;
  transition: all 150ms var(--np-ease-in-out-cubic);
  flex: 1 1 0%;
  font-size: 1rem;
  line-height: 1.75rem;
  font-weight: 500;
  transform: skew(calc(var(--np-skew-logo) * -1));
  box-shadow:
    0 1px 3px 0 rgb(0 0 0 / 0.1),
    0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.tabButton span {
  display: inline-block;
  transform: skew(var(--np-skew-logo));
}

.tabButton:hover,
.tabButton:focus {
  outline: none;
  color: var(--np-slate-800);
  border-color: var(--np-accent-400);
}

.tabButton:last-child {
  border-bottom-right-radius: 0.25rem;
}

.tabButton.-active {
  z-index: 10;
  background-color: white;
  color: var(--np-slate-900);
  border-color: var(--np-accent-500) !important;
}