/**
 * @file
 * Tabs (local tasks) component.
 */

.tabs {
  margin-bottom: var(--wp--preset--spacing--30, 24px);
}

/* --- Primary tabs --- */

.tabs--primary {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--wp--preset--color--border, #dcdcde);
}

.tabs--primary .tabs__tab {
  list-style: none;
}

.tabs--primary .tabs__tab a {
  display: inline-block;
  padding: var(--wp--preset--spacing--10, 8px) var(--wp--preset--spacing--20, 16px);
  font-size: var(--wp--preset--font-size--small, 0.875rem);
  text-decoration: none;
  color: var(--wp--preset--color--muted, #757575);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}

.tabs--primary .tabs__tab a:hover {
  color: var(--wp--preset--color--dark, #1a1a1a);
}

.tabs--primary .tabs__tab.is-active a,
.tabs--primary .tabs__tab a.is-active {
  color: var(--wp--preset--color--primary, #0073aa);
  border-bottom-color: var(--wp--preset--color--primary, #0073aa);
  font-weight: 600;
}

/* --- Secondary tabs --- */

.tabs--secondary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--10, 8px);
  margin: 0;
  padding: var(--wp--preset--spacing--10, 8px) 0;
  list-style: none;
}

.tabs--secondary .tabs__tab a {
  font-size: var(--wp--preset--font-size--small, 0.875rem);
  text-decoration: none;
  color: var(--wp--preset--color--muted, #757575);
}

.tabs--secondary .tabs__tab.is-active a,
.tabs--secondary .tabs__tab a.is-active {
  color: var(--wp--preset--color--primary, #0073aa);
  font-weight: 600;
}
