.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);
  border-bottom: var(--border-width-thin) var(--border-style-solid) var(--gray-300);
  padding: var(--spacing-2) var(--spacing-4);
  gap: var(--gap-xl);
}

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

.tabs  .tabs__button {
  min-width: 102px;
  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{
  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-xs);
  border: none;
  padding: var(--spacing-1) var(--spacing-3);
}

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

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

.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: var(--border-width-medium) var(--border-style-solid) var(--primary-700);
  background: transparent;
  color: var(--primary-700);
}

.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;
}