.tabs.horizontal {
  flex-direction: var(--flex-direction-col);
}

.tabs.vertical {
  flex-direction: var(--flex-direction-row);
  gap: var(--spacing-lg);
  padding: var(--spacing-6);
}

.tabs .tabs__list{
  min-height: 40px;
}

.tabs.horizontal .tabs__list {
  flex-direction: var(--flex-direction-row);
  align-items: flex-end;
  gap: var(--gap-lg);
  border-bottom: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
  padding: 0;
}

.tabs.vertical .tabs__list {
  flex-direction: var(--flex-direction-col);
  gap: var(--gap-lg);
}

.tabs  .tabs__button {
  background: transparent;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

.tabs.vertical .tabs__button .tab_label {
  min-width: 50px;
}

.tabs.vertical .tabs__button{
  min-width: 102px;
  justify-content: var(--justify-start);
  gap: var(--gap-md);
  border: none;
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-sm);
}

.tabs.horizontal .tabs__button{
  justify-content: var(--justify-center);
  gap: var(--gap-md);
  height: var(--spacing-12);
  margin-bottom: calc(var(--border-width-thin) * -1);
  border: none;
  border-bottom: var(--border-width-medium) var(--border-style-solid) transparent;
  padding: 0 var(--spacing-2);
  font-weight: var(--font-weight-semibold);
  line-height: var(--spacing-7);
  color: var(--gray-500);
  transition: all 0.2s ease-in-out;
}

.tabs.vertical .tabs__button:hover {
  background-color: var(--primary-100);
}

.tabs.horizontal .tabs__button:hover {
  color: var(--primary-800);
  border-bottom-color: var(--primary-800);
}

.tabs.horizontal .tabs__button:focus-visible {
  color: var(--primary-800);
  outline: var(--border-style-solid) var(--focus-ring-width) var(--primary-500);
  outline-offset: calc(var(--focus-ring-offset) * -1);
}

.tabs .tabs__button.active {
  color: var(--gray-25);
  font-weight: var(--font-weight-bold);
}

.tabs.vertical .tabs__button.active {
  background-color: var(--primary-700);
}

.tabs.horizontal .tabs__button.active {
  border-bottom-color: var(--primary-700);
  background: transparent;
  font-weight: var(--font-weight-semibold);
  color: var(--primary-800);
}

.tabs .tabs__resource-count {
  min-width: var(--spacing-6);
  height: var(--spacing-6);
  background: var(--warning-100);
  border-color: var(--warning-500);
  color: var(--warning-900);
  margin-top: 1px;
}