:root {
  --tab-icon-color: currentColor;
}

.tabs {
  &:not(.s) {
    .tab {
      border-radius: 8px;
      height: 32px;
    }
  }

  &.s {
    .tab {
      height: 24px;
      font-size: 12px;
      border-radius: 4px;
      gap: 4px;
    }
  }
}
.tab {
  background-color: transparent;
  height: 32px;
  border: none;
  outline: none;
  color: var(--color-neutral-70);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;

  &:disabled {
    cursor: not-allowed;
    color: var(--color-neutral-40);
  }

  &.active {
    background: var(--color-surface-3);
    color: var(--color-neutral-100);
  }

  &:hover:not(.active):not(:disabled) {
    background: var(--color-surface-2);
  }

  &:not(.active) .tabIcon[data-custom-color] {
    opacity: 0.6;
  }
}

.tabIcon {
  color: var(--tab-icon-color);

  &.neutral {
    color: var(--color-neutral-70);
  }

  &.accent {
    color: var(--color-accent-40);
  }

  &.error {
    color: var(--color-error-30);
  }

  &.success {
    color: var(--color-success-30);
  }

  &.warning {
    color: var(--color-warning-30);
  }
}