.group-nav {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0 0.25rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::webkit-scrollbar {
    display: none;
  }
}

@media (min-width: 640px) {
  .group-nav {
    gap: 1rem;
    overflow-x: hidden;
  }
}

.group-nav__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: light-dark(var(--color-blue-600), var(--color-blue-400));
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  border-bottom: 3px solid transparent;
  margin-bottom: 0.375rem;
  text-decoration: none;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
  font-weight: 500;
}

@media (min-width: 640px) {
  .group-nav__tab {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.group-nav__tab:not(.group-nav__tab--active):hover {
  background-color: light-dark(var(--color-blue-50), var(--color-blue-950));
}

.group-nav__tab:focus {
  outline: 2px solid light-dark(var(--color-blue-600), var(--color-blue-400));
}

.group-nav__tab--active {
  color: light-dark(var(--color-gray-700), var(--color-gray-300));
  font-weight: 600;
  border-bottom-color: light-dark(var(--color-gray-700), var(--color-gray-300));
  border-radius: 0;
  margin-bottom: 0;
  padding-bottom: 0.625rem;
}

.group-nav__tab-badge {
  line-height: 1rem;
}

.group-nav__tab-badge--active {
  background-color: light-dark(var(--color-gray-700), var(--color-gray-600));
  color: var(--color-white);
}

.group-nav__divider {
  height: 1.5rem;
  width: 1px;
  background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
  align-self: center;
}

.group-nav__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}