.tab,
.fluid-tabs {
  border-top: 1px solid var(--clr-gray-200);
}

.tab .nav ul,
.fluid-tabs .fluid-tabs__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 2px solid var(--clr-gray-200);
  overflow-y: hidden;
  width: 100%;
}

.tab .nav li,
.fluid-tabs .fluid-tabs__tab {
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  font-weight: 500;
  color: var(--clr-black-500);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.tab .nav li:hover,
.fluid-tabs .fluid-tabs__tab:hover {
  color: var(--clr-body);
}

.tab .nav li.active,
.tab .nav li[aria-selected="true"],
.fluid-tabs .fluid-tabs__tab.active,
.fluid-tabs .fluid-tabs__tab[aria-selected="true"] {
  color: var(--clr-primary);
  border-bottom-color: var(--clr-primary);
}

.tab-content .panel,
.fluid-tabs__content .fluid-tabs__panel {
  padding: 1.25rem 0;
}

.tab-content .panel:not(.active),
.tab-content .panel[hidden],
.fluid-tabs__content .fluid-tabs__panel:not(.active),
.fluid-tabs__content .fluid-tabs__panel[hidden] {
  display: none;
}